这篇文章主要为大家展示了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如何实现联动效果”的内容,如果该文章对您有所帮助并觉得写得不错,劳请分享给您的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。