vant自定义二级菜单操作_vant树型菜单多级,vant树状菜单 - CSDN文库

5星 · 超过95%的资源 113 浏览量更新于2023-05-03 评论收藏 136KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vant自定义二级菜单操作自定义二级菜单操作

（（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) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论10

泡泡SOHO

2023-06-08

操作流程很顺畅，写vant自定义二级菜单也变得更加有趣了。

weixin_38564085

粉丝: 5
资源: 938

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈