温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue结合vant如何实现联动效果

发布时间:2022-01-22 13:32:02 来源:亿速云 阅读:320 作者:清风 栏目:开发技术

这篇文章主要为大家展示了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如何实现联动效果”的内容,如果该文章对您有所帮助并觉得写得不错,劳请分享给您的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI