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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
vue cli3适配所有端方案的实现
Apr 13 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
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python中的filter()函数的用法
2015/04/27 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
django中间键重定向实例方法
2019/11/10 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
广告设计应届生求职信
2014/03/01 职场文书
网络宣传方案
2014/03/15 职场文书
学校联谊协议书
2014/09/16 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python