关于使用vue集成Ant Design Vue因版本变化导致的问题


author: Nathannie
date: 2022年5月9日17:47:56


问题背景

环境参数:

"dependencies": {
   "ant-design-vue": "^2.0.0-rc.3",
   "vue": "^3.0.0",
   "vue-router": "^4.0.0-0",
   "vuex": "^4.0.0-0"
},

按照视频操作,集成 Ant Design Vue ,引入按钮样式组件,发现样式(颜色)不生效。

预期效果:
关于使用vue集成Ant Design Vue因版本变化导致的问题_第1张图片
实际效果:
关于使用vue集成Ant Design Vue因版本变化导致的问题_第2张图片

可以看到颜色红色不生效 。

问题分析

经过一系列的检查,发现是官网代码书写有误
官网给的代码(有误):
关于使用vue集成Ant Design Vue因版本变化导致的问题_第3张图片

Danger

正确情况的代码:

Danger

分析:没有添加type=""属性。

问题出现在danger样式都没有添加type=""
图1
关于使用vue集成Ant Design Vue因版本变化导致的问题_第4张图片
图2
关于使用vue集成Ant Design Vue因版本变化导致的问题_第5张图片


⭐准确的原因是学习视频中展示的官网使用的Ant Design Vue教程版本是2.0.0.rc.2

image.png

danger样式作为类型是在2.2.0之后,所以就视频中的版本,使用danger必须使用属性的方式,即type="danger"
当前学习时间,官网版本变为2.2.8,而本地版本是"ant-design-vue": "^2.0.0-rc.3",,所以直接使用类型方式是不支持的。

image.png

问题解决

如果安装ant-design-vue<2.2.0,则必须使用type="danger"
如果安装ant-design-vue>2.2.0,则可以使用danger

# <2.2.0
Default

# > 2.2.0
Default

相关参考

  1. https://2x.antdv.com/componen...
  2. https://www.itxst.com/ant-des...

你可能感兴趣的