vue结合vant实现联动效果
作者：~小仙女~
这篇文章主要为大家详细介绍了vue结合vant实现联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vant中提供的选择器结合弹出框来实现联动效果，供大家参考，具体内容如下
1、用到的组件：Picker、Popup
2、引入：在main.js也好、页面中也好全局也好，正确的引入；此处在main.js中按需引入；
main.js
import { Picker,Popup } from 'vant';
Vue.use(Picker).use(Popup )test.vue
<template>
<div class='login'>
<van-field
readonly
clickable
label="城市"
:value="value"
placeholder="选择城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange" />
</van-popup>
</div>
</template>
<script>
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
};
export default {
name: 'login',
data() {
return {
value:'',
showPicker:false,
columns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys['浙江'],
className: 'column2',
defaultIndex: 2
}
]
};
},
//方法集合
methods: {
onConfirm(value) {
this.value = value[0]+'-'+value[1];
this.showPicker = false;
},
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
},
}
</script>之前使用antd，开始用vant之后发现一个不太好的地方，antd介绍一个组件会把他涉及的组件都写入进来，而vant只是引入该目录要介绍的组件，不是很方便
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。