vant怎么实现自定义二级菜单省份和城市分开效果
Admin 2022-06-02 群英技术资�
�1)组件解释:
本组件是为了解决二级联动的效果编写的,这里使用了省份和城市分开的效果,具体展示效果,可以参考下靀�
�2)组件代码:
<template> <div> <button @click="showM">{{ value || "选择省份" }}</button> <button @click="showC">{{ value2 || "选择城市" }}</button> <!-- 省份 --> <van-popup v-model="showPicker" position="bottom"> <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" /> </van-popup> <!-- 城市 --> <van-popup v-model="showPicker2" position="bottom"> <van-picker show-toolbar :columns="columns2" @confirm="onConfirm2" @cancel="showPicker2 = false" /> </van-popup> </div> </template> <script> export default { mounted() {}, data() { return { value: "", value2: "", columns: ["杭州", "北京", "海南�"], city: [ { name: "杭州", value: ["广州", "佛山"] }, { name: "北京", value: ["海淀", "廊坊"] }, { name: "海南�", value: ["三亚", "海口"] } ], showPicker: false, showPicker2: false, columns2: [] }; }, methods: { onConfirm(value) { this.value = value; this.value2 = ""; this.showPicker = false; }, onConfirm2(value) { this.value2 = value; this.showPicker2 = false; }, showM() { this.showPicker = true; }, showC() { if (this.value) { let self = this; self.showPicker2 = true; self.city.forEach(v => { if (v.name == self.value) { self.value2 = self.name; self.columns2 = v.value; } }); } else { } } }, components: {} }; </script> <style lang="scss" scoped> </style>
�3)展示效果:
还可以结合筛选功能使用:
补充知识�vant二级联动picker选择�
我就废话不多说了,大家还是直接看代码吧~
<van-picker :columns="columns" @change="onChange" />
const citys = { '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], '福建': ['福州', '厦门', '莆田', '三明', '泉州'] };
data:{ columns: [ { values: Object.keys(citys), className: 'column1' }, { values: citys['浙江'], className: 'column2', defaultIndex: 2 } ], }
onChange(picker, values) { picker.setColumnValues(1, citys[values[0]]); console.log(values) },
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
JavaScript中有三个逻辑运算符,&&与、||或�!非,虽然他们被称为逻辑运算符,但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值,他们的结果也同样可以是任意类型�
vue-router安装步骤是什么,使用是怎样?一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中� 自定义hook是一个从use开始的调用其他hook的Javascript函数,下面看下react中创建自定义hooks的相关知识,感兴趣的朋友一起看看吧
这篇文章给大家分享的是JS实现获取文本框的内容的方法。小编觉得挺实用的,对新手学习JavaScript的使用有帮助,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078