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如何實現聯動效果”的內容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。