查看项目vue版本(vue 查看版本)

作者：Coder WangYu

来源：SegmentFault 思否社区

在工作中遇到的一个小小BUG

在使用ant-design-vue的cascader时，发现清空内容的功能没有用，查阅官方文档也并没有找到相关的解决方案。然后找到了这样的内容：

antd Select组件的allowClear点击失效 无法清空? 观察发现,由于同时设置了value属性和allowClear属性, 导致无法点击X清空当前选中项,官方相应的文档并没有提供allowClear点击事件让我们订制自己的事件,因此,解决办法是去除value或者 获取到X清空的dom元素,增加点击事件.

然后按照这个思路开始解决BUG。

首先是一个失败的问题复现

在问题复现时发现貌似这个问题在新版本中已经得以解决了。于是我查看了公司在做的项目的版本，如下：

"vue": "^2.6.11",

"ant-design-vue": "^1.6.4",

而没有将问题复现出来的项目的版本：

"vue": "^2.6.11"

"ant-design-vue": "^1.7.2",

还是贴一下代码吧：

select.vue：

<template>

<div class= "select">

<a-select allowClear :value= "activeValue"defaultValue= "lucy"style= "width: 120px"@change= "handleChange">

<a-select-option value= "jack"> Jack </a-select-option>

<a-select-option value= "lucy"> Lucy </a-select-option>

<a-select-option value= "disabled"> Disabled </a-select-option>

<a-select-option value= "Yiminghe"> yiminghe </a-select-option>

</a-select>

</div>

</template>

<>

exportdefault {

data{

return{

activeValue: "lucy",

}

},

methods: {

handleChange (val) {

this.activeValue = val

}

}

}

</>

cascader.vue：

<template>

<div class= "cascader">

<span class= "queryTitle">测试:</span>

<a-cascader

:value= "activeValue"

changeOnSelect

allowClear

:options= "options"

:fieldNames= "{

label: 'label',

value: 'value',

children: 'children',

}"

placeholder= "Please select"

@change= "onChange"

/>

</div>

</template>

<>

exportdefault {

data{

return{

activeValue: [ "zhejiang"],

value: [],

options: [

{

value: "zhejiang",

label: "Zhejiang",

children: [

{

value: "hangzhou",

label: "Hangzhou",

children: [

{

value: "xihu",

label: "West Lake",

},

],

},

],

},

{

value: "jiangsu",

label: "Jiangsu",

children: [

{

value: "nanjing",

label: "Nanjing",

children: [

{

value: "zhonghuamen",

label: "Zhong Hua Men",

},

],

},

],

},

],

};

},

methods: {

onChange(val) {

this.activeValue = val;

},

},

};

</>

看看效果：

可以看到，新版本的ant-design-vue可以正常的清空，即使同时使用value属性和allowClear属性。

旧版本的问题重现

先看下代码：

<a-cascader

allowClear

changeOnSelect

@mouseenter= "clearCascader"

@change= "changeaddvcd"

style= "width: 200px;"

:fieldNames= "{

label: 'adnm', value: 'adcd', children: 'child'

}"

:value= "activeValue"

:options= "adcdOption"

placeholder= "请选择县"

/>

在cascader的配置中，同时设置了allowClear和value两个属性。下面看看效果：

可以看到点击清除按钮并没有什么卵用，于是解决方案来了：

@mouseenter触发的方法：在鼠标移入cascader后获取用于清空内容的按钮，然后为按钮添加一个点击事件，点击后手动清空当前显示的内容。

// 清空级联选择器

clearCascader (e) {

// console.log(e)

letclearDom = e.path[0].children[2]

clearDom.addEventListener( "click", => {

this.activeValue = []

})

},

看效果：

对于allowClear和value，官方文档给出的解释：

参数 说明 类型 默认值

allowClear 是否支持清除 boolean true

value(v-model) 指定选中项 string[] | number[] -

总结

由于在实际开发中，项目的版本以及依赖的包的版本有可能是旧的，也有可能是新的。所以有些内容的用法可能被遗弃或升级或改进，所以在开发时，遇到问题要多看文档，文档中没有的问题也要及时查找相关的解决方案。