vue结合vant如何实现联动效果

这篇文章主要为大家展示了vue结合vant如何实现联动效果，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“vue结合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只是引入该目录要介绍的组件，不是很方便

以上就是关于“vue结合vant如何实现联动效果”的内容，如果该文章对您有所帮助并觉得写得不错，劳请分享给您的好友一起学习新知识，若想了解更多相关知识内容，请多多关注亿速云行业资讯频道。