vant自定义二级菜单操作


Posted in Javascript onNovember 02, 2020

(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自定义二级菜单操作

还可以结合筛选功能使用:

vant自定义二级菜单操作

补充知识: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)
 },

以上这篇vant自定义二级菜单操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
php 获取完整url地址
2008/12/20 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
十八大闭幕感言
2014/01/22 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
网络技术专业推荐信
2014/02/20 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书