项目中ant-design-vue2.x升级3.x实践总结

1,725 阅读2分钟

背景

项目A是2022年初启动的项目,当时前端使用的是vue3 +ant-design-vue2.2.8,项目开发期间发现ant-design-vue官网已正式推出3,且不推荐2.x版本。

image.png

初看3.0

在使用过程中,文档里也看到很多3.0新增的功能比较的实用和贴切需求,比如:

  • InputNumber数字输入框组件,新增addonAfter属性支持后置标签

    image.png
  • Select组件多选文字过长会默认悬浮显示完整title、新增slot:tagRender支持自定义tag内容render

    image.png
image.png

升级实践总结

在项目中升级ant-design-vue后,根据控制台的warning修改,主要遇到的改动是:

1)Table组件内容插槽配置

Warning: [ant-design-vue: Table] `column.slots` is deprecated. Please use `v-slot:headerCell` `v-slot:bodyCell` instead.

官方文档说明: image.png

项目中修改:去掉column.slots,改成v-slot:headerCellv-slot:bodyCell

注意:如果设置了v-slot:bodyCell,所有column都会“进入”到插槽,需在插槽内自行过滤掉不使用插槽的情况。`

2)Modal组件footer插槽配置

问题:项目中封装了一个modal的组件,里面定义了footer插槽支持自定义,升级后发现没有自定义的footer都不显示了。

修改:在封装的modal组件中判断slots.footer是否定义,如果没有则不加入

<template #footer v-if="hasFooterSlot"> <slot name="footer"> </slot> </template>

估计是antdv新版本modal默认定义了template #footer就占位了,不考虑没有实际定义插槽的情况(没内容则为空),老版本2.2.8如果没有实际定义插槽内容会给出默认footer的(如下2图所示)。

2.2.8版本例子: image.png 3.x例子: image.png

对于antdv这一点,不知基于什么考虑修改了的,个人建议还是没定义footer slot时,给出默认footer会比较好的哦,如果不需要footer是可以直接用:footer="null"的对吧

3)DatePicker组件使用过程中momentjs改成dayjs

image.png