Vue3+ElementPlus+TS开发业务功能的问题汇总(持续更新)

1.开发表单弹框功能时遇到两个问题:加入了校验规则后,无论下拉框是否选择数据下面的红色提示都会触发显示不会自动隐藏 ; 另外,新增的功能在提交后数据无法重置,这种在修改时可能会出现,但新增正常情况是不会出现的,故此一脸懵逼。

最后查找原因是因为表单绑定model时候用错了方法,用的v-model指令进行的绑定,而不是:model的方式绑定的模型,两者是有区别的,其中:model相当于v-bind:model这个指令而不是v-model这样;

具体区别可以参考这篇文章:

v-model和:model的区别_:model和v-model区别-CSDN博客

2.使用上传文件功能,上传文件如果没有单独的文件上传服务器或者上传文件的服务和前端页面地址并不一致的情况下需要自定义请求调用上传服务。下面是具体的实现代码:

复制代码
<template>
<el-form-item label="图片" style="flex-basis: 100%">
        <el-upload
          v-model:file-list="fileLists"
          :http-request="uploadFile"
          list-type="picture-card"
          multiple
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
</template>
<script lang="ts" setup>
    const dialogImageUrl = ref<string>("");
const dialogVisible = ref<boolean>(false);
const fileLists = ref<any>([]);
const fileUrlMap = new Map();
const handleRemove: UploadProps["onRemove"] = (uploadFile: any) => {
  const { uid } = unref(uploadFile);
  fileUrlMap.delete(uid);
};
//预览图片
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
//自定义图片上传
async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const result = await commonUpload(options.file);
  fileUrlMap.set(options.file.uid, result.toString());
}
</script>

通过绑定http-request="uploadFile" 这样可以调用远程的上传服务 另外如果要实现平铺的预览效果配置这个属性即可list-type="picture-card"

3.sass穿透 穿透有多种写法,今天这里先写一种记下:

css 复制代码
::v-deep .el-upload-list {
  .el-upload-list__item,
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
  }
}

另外几种可参考这篇文章

sass样式穿透方式_sass穿透-CSDN博客

相关推荐
树上有只程序猿35 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥41 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸41 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin44 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆1 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术1 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git