vue+vant,vue框架vant官网

　　本文主要详细介绍vue结合vant的联动效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　vant中提供的选择器结合弹出框实现联动效果，供大家参考。具体情况如下

　　1、用到的组件：选取器、弹出菜单

　　2、引入：在main.js中正确引入，在页面中或全局；这里按需在main.js介绍；

　　主页. js

　　从“vant”导入{ Picker，Popup }；

　　Vue.use(选取器)。使用(弹出)

　　测试. vue

　　模板

　　div class=登录

　　范菲尔德

　　只读的

　　可点击的

　　Label=城市

　　:value=value

　　Placeholder=选择城市

　　@click=showPicker=true

　　/

　　van-popup v-model= show picker position= bottom

　　厢式货车搬运工

　　显示-工具栏

　　:列=“列”

　　@cancel=showPicker=false

　　@confirm=onConfirm

　　@change=onChange /

　　/van-popup

　　/div

　　/模板

　　脚本

　　const citys={

　　浙江:[杭州，宁波，温州，嘉兴，湖州]，

　　福建:[福州，厦门，莆田，三明，泉州]

　　};

　　导出默认值{

　　名称：登录，

　　data() {

　　返回{

　　值：，

　　showPicker:假，

　　列：[

　　{

　　值：Object.keys(城市)，

　　类名：“列1”

　　},

　　{

　　值：城市[浙江]，

　　类名：“列2”，

　　默认索引：2

　　}

　　]

　　};

　　},

　　//方法集合

　　方法：{

　　onConfirm(值){

　　this . value=value[0]- value[1]；

　　this.showPicker=false

　　},

　　onChange(选取器，值){

　　picker.setColumnValues(1，cities[values[0]])；

　　}

　　},

　　}

　　/脚本

　　之前用antd，开始用vant后发现不好的地方。antd在介绍一个组件的时候，会把涉及到的组件都写出来，而vant只是把要介绍的组件介绍到这个目录里，不是很方便。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。