Vue插件之AntDesign

标签: 无 分类: 未分类 创建时间:2023-04-25 03:51:12 更新时间:2024-11-15 10:49:44

前言

这是另外一个 Vue 的 UI 库,是1:1复刻的React版本的,后来我想着说,到底和ElementPlus那个更加的好用呢? Ant-Design-Vue 的star数量要比 ElementPlus的少一点。

1.文件上传

1
2
3
4
5
6
<a-upload v-model:file-list="videoFileList" name="file" :customRequest="onUploadVideo" :progress="progress" @change="handleChange">
<a-button>
<upload-outlined />
上传视频
</a-button>
</a-upload>
参考文章:
【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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const timer = ref<number | null>(null);
const progress = ref<number>(0);
defHttp
.uploadFile(
{ url },
{
file: dataFile,
data: {
biz: path,
},
},
{
success: (res) => {
if (res.success) {
message.success('上传成功');
timer.value && window.clearInterval(timer.value);
event.onSuccess();
currenFile.status = 'done';
let fileName = res.message;
currenFile.name = fileName.substring(fileName.lastIndexOf('/') + 1);
switch (type) {
case 'pdf':
successPdf(res);
break;
case 'video':
successVideo(res);
break;
case 'orbit':
successOrbit(res);
break;
}
}
},
},
(ev) => {
// const percent = (ev.loaded / ev.total) * 100;
const complete = (ev.loaded / ev.total) * 100;

// 超过80 开始干涉
if (complete >= 80) {
if (timer.value) return;
timer.value = window.setInterval(() => {
progress.value += (100 - progress.value) * 0.2; // 每次增加剩下的20%

// 超过99 不再变化(此时也接近上传完成了)
if (progress.value > 99) {
timer.value && window.clearInterval(timer.value);
}
event.onProgress({ progress });
}, 1000);
} else {
// 在80之前都按照axios计算出的进度来显示
progress.value = complete;
event.onProgress({ complete });
}
// 计算出上传进度,调用组件进度条方法
}
)
.catch((err) => {
console.log(err);
if (event) {
currenFile.status = 'error';
}
timer.value && window.clearInterval(timer.value);
});
参考文章:
【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
2
3
4
5
6
7
8
9
10
11
12
13
<a-modal
:title="title"
:width="width"
:visible="visible"
@ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
:maskClosable="false"
:body-style="{ height: 'auto' }"
:style="{ maxHeight: '90%' }"
>
</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
2
"ant-design-vue": "^2.2.8"
"vue": "^3.2.26"

【尝试方法】
(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
2
3
4
onCancel (close:any) {
console.log('ddsf')
close()
}

【解决方案】
我删除了 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
2
import { message, Modal } from 'ant-design-vue'
message.success("成功了")

【解决方案】
主要问题就是缺少了下面的代码。

1
import 'ant-design-vue/dist/antd.css'

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 {
title: '工作空间',
dataIndex: 'workspaceName',
width: 100,
className: 'titleStyle',
ellipsis: true,
slots: { customRender: 'workspace' },
customRender: ({ text, record, index }) => {
const obj = {
children: text,
props: {} as any,
};
if (current.value.indexOf(EDeviceTypeName.Dock) !== -1) {
if (record.domain === EDeviceTypeName.Aircraft) {
obj.children = '';
}
}
return obj;
},
},

【解决方案】
我就暂时就注释掉了这个代码,不知道作用是什么,理解不了。

参考文章:
【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的版本看看
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。