vue vant联动效果
~小仙女~ 人气:0vant中提供的选择器结合弹出框来实现联动效果,供大家参考,具体内容如下
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只是引入该目录要介绍的组件,不是很方便
加载全部内容