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

相关推荐
天天向上10246 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y21 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁28 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry28 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录30 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟30 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan34 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson39 分钟前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript