vue結合vant實現(xiàn)聯(lián)動效果

更新時間：2022年01月21日 12:41:21 作者：~小仙女~

這篇文章主要為大家詳細介紹了vue結合vant實現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vant中提供的選擇器結合彈出框來實現(xiàn)聯(lián)動效果，供大家參考，具體內(nèi)容如下

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之后發(fā)現(xiàn)一個不太好的地方，antd介紹一個組件會把他涉及的組件都寫入進來，而vant只是引入該目錄要介紹的組件，不是很方便

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: