Vue插件之AntDesign
前言
这是另外一个 Vue 的 UI 库,是1:1复刻的React版本的,后来我想着说,到底和ElementPlus那个更加的好用呢? Ant-Design-Vue 的star数量要比 ElementPlus的少一点。
1.文件上传
1 | <a-upload v-model:file-list="videoFileList" name="file" :customRequest="onUploadVideo" :progress="progress" @change="handleChange"> |
【1】.nt design vue upload上传如何传参数
【2】.Ant Design Vue Upload 自定义上传 customRequest Upload 常用属性和方法。由于前面 简单使用 的时候我们自定义了上传逻辑,组件未能监听到上传的进度 fileList 中的 file.percent 会一直处于 0 的状态。所以下面我们实现一下请求进度逻辑,补全该进度条。请求信息详情接口成功后,将图片文件等url重新按照 fileList 的格式赋值文件列表。
2.Axios上传进度
如果使用了 customResqust 自定义上传的话,那么文件列表里面就会一直显示 loading 。一种解决办法就是借助于 axios 的哦 onUploadProgress 函数,自定义一个进度条。这个时候遇到的另外一个问题,那就是这个onUploadProgress 会很快结束,但是文件还没有上传完成,这个时候可以参考 NPprocess 的做法,进行模拟显示。比如下面的,我就是用了 jeecg-boot 的请求的函数进行处理的。
1 | const timer = ref<number | null>(null); |
【1】.axios进度条100%
【2】. axios+Vue上传文件显示进度 onuploadprogress 事件中显示上传为100%并不准确,一定要等到响应回来才能认为完成了100%,不然用户此时关闭了浏览器的话,上传就失败了。或者有其它逻辑时,此时点提交,就会导致后台找不到上传的文件路径等问题。
【3】.antd vue upload 组件使用 customRequest 上传文件显示文件上传进度 决定通过 $refs 调用 upload 组件中显示进度条的方法和上传成功方法
【4】.解决antd upload自定义上传customRequest,上传时一直loading加载的问题 这个和我的现象一模一样,调用onSuccess事件,解决loading一直加载的问题,可以发现onProgress事件与onSuccess事件,onProgress是上传进度相关的,onSuccess是上传成功监听事件。
【5】.antdesign+vue+ts自定义上传文件customRequest,显示进度条onProgress,axios请求中断axios.CancelToken。
【6】.antd of vue 利用customRequest自定义渲染上传进度条 这里也利用了 模拟上传的方式,防止进度条过快的走完。
【7】.axios:你的进度条准确吗 这里通过模拟进度条的方式,解决了进度条不准的问题,大名鼎鼎的NProgress库也是这么做的。。当我们上传文件时,数据会被不断地write到这个缓存区;每次写入时 就会被侦听到,然后调用一次onUploadProgress,e.loaded其实表示的就是写入到buffer缓存区的数据。但是此时的数据可能还没有被发送出去,仍然在缓存区中放着;加上发送数据也需要时间等到数据全部到达Server的时候,才会执行response回调,这时候上传操作才算完成;但客户端那边早就显示发送完毕了,时差也就出来了。
【8】. js文件异步上传进度条 其实无论是原生js写xhr,还是jq的ajax,还是axios的异步都提供了一个获取上传进度的API,首先我们来看一下原生js如何获取上传进度。下面的示例代码中,异步上传均采用formData的形式来上传。
3.a-modal设置高度
使用 body-style 可以设置高度。
1 | <a-modal |
【1】.ant-design-vue模态框a-modal设置高度并可滑动问题
【2】.Ant design vue的a-modal修改宽度与高度 /deep/ .ant-modal-body
【3】.antd modal高度自适应
bodyStyle={{ height: 'auto' }} style={{ maxHeight: '80%' }}
【4】.Ant desgin vue a-model设置自适应高度宽度 给.ant-model-content设置max-width,实现宽度自适应 (ant-model-body不能设置宽度)
4.Modal.confim无法关闭
莫名其妙的出现了点击 取消 按钮,面板不关闭的问题。我的vue和 ant-design-vue版本如下
1 | "ant-design-vue": "^2.2.8" |
【尝试方法】
(1)尝试了使用 Model.destoryAll() 方法
(2)尝试了使用 model.destory() 方法
(3)尝试重新安装vue版本:3.3.4,ant-design-vue版本:4.2.1
(4)尝试使用:modal.component!.props.visible = false
(5)尝试了: “ant-design-vue”: “^3.2.20”, “vue”: “^3.2.25”,版本
(6)尝试了调用 close 方法,结果也还是不行
1 | onCancel (close:any) { |
【解决方案】
我删除了 pnpm-lock.json,然后重新安装了 pnpm install,vue版本:3.2.25,”ant-design-vue”: “3.2.20”。
【1】.【Ant Design of Vue】Modal.confirm无法关闭的bug
【2】.antd-vue Modal.confirm方法 执行确定事件弹窗没关闭 将vue版本锁定3.3.4
【3】.Modal.confirm无法关闭 尝试了: “ant-design-vue”: “^3.2.20”, “vue”: “^3.2.25”,版本
【4】.Modal.confirm在设置closable为true的情况下,onCancel传入的close函数参数为undefined 这里提供了 close 方法
【5】.Modal的静态方法打开弹窗无法关闭,之前几周使用时正常,新项目重新安装后,出现该问题 将vue的版本锁死在vue3.3.x。1.把当前项目的node-modules、yarn.lcok删除。2.yarn install。3.将本仓库的yarn.lock替换当前项目。4.再次yarn install。5.不用担心我的lock会影响到你的项目,yarn会自动更新不匹配的部分
【6】.【Ant Design of Vue】Modal.confirm无法关闭的bug
5.message无效
又让我遇到了一个奇怪的问题,上面的 “Modal.confim无法关闭” 问题解决了,但是这个 message 却无法弹出窗口了。代码非常的简单,就是弹出一个提示框。
1 | import { message, Modal } from 'ant-design-vue' |
【解决方案】
主要问题就是缺少了下面的代码。
1 | import 'ant-design-vue/dist/antd.css' |
【1】.ant组件库 message组件只响应了一次就失效了
【2】.antd中的message.loading
【3】.记Ant Design Vue Modal组件的使用及踩的坑
【4】.Modal的静态方法打开弹窗无法关闭,之前几周使用时正常,新项目重新安装后,出现该问题
【5】.antd $confirm无法关闭踩坑
6.index.vue:324 Warning: columns.customRender
return cell props is deprecated with perf issue, please use customCell
instead.
在使用 table 组件的时候,进行自定义插槽渲染,结果控制台出现了这个问题,但是翻遍了官方文档,还是有这个 customRender 的写法,但是又没有说如何使用 customCell 增加修改,antd 的版本:4.1.2。早期的版本3.2.20,好像就没有这个提示,出问题的代码如下,在 table 的配置中多了一个这个 customRender 配置
1 | { |
【解决方案】
我就暂时就注释掉了这个代码,不知道作用是什么,理解不了。
【1】.关于官网table组件Column文档的疑惑 我是希望官方把文档补充完整,不提供customRender就把文档中的删掉,关于customCell的返回值的每个属性及其作用列出来。至于哪种渲染合理,我是这个觉得哈:多一个选择嘛,自定义插槽有自定义插槽的优点,customRender也有他的优势嘛。
【2】.antd vue table 单元格添加样式背景色 customCell属性
【3】.Ant Design Vue实现可点击单元格表单,customCell使用
【4】.Vue项目antdv中scopedSlots的customRender和customRender函数冲突
【5】.Table下 rowSelection renderCell使用合并chebox行 报错 Warning: columns.customRender return cell props is deprecated with perf issue, please use customCell instead. 这是antd提示的,你可以回滚到之前的antd的版本看看