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只是引入该目录要介绍的组件,不是很方便

推荐阅读