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如何实现联动效果”的内容，如果该文章对您有所帮助并觉得写得不错，劳请分享给您的好友一起学习新知识，若想了解更多相关知识内容，请多多关注编程网精选频道。