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博客

相关推荐
JosieBook42 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端2 小时前
claude code 原理分析
前端
GalaxyMeteor2 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮2 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js