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

相关推荐
小帆聊前端1 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉20 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience25 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner30 分钟前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手40 分钟前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏41 分钟前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已43 分钟前
next.js中实现缓存
前端
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
Zuckjet_1 小时前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
我总是词不达意1 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui