使用mint-ui实现省市区三级联动效果的示例代码


Posted in Javascript onFebruary 09, 2018

引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker

背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似。

具体实现:

通过阅读官网的实例,大概就能知道这个组件的用法:

在vue中写入组件:<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

我们可以看到,这个组件中传入的数据slots和当其改变是触发的事件:onValuesChange(),所以只要在使用该组件的父组件内注册slots和onValuesChange就可以实现了

以下是官网上的实例:

export default {
 methods: {
 onValuesChange(picker, values) {
 if (values[0] > values[1]) {
 picker.setSlotValue(1, values[0]);
 }
 }
 },
 data() {
 return {
 slots: [
 {
  flex: 1,
  values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
  className: 'slot1',
  textAlign: 'right'
 }, {
  divider: true,
  content: '-',
  className: 'slot2'
 }, {
  flex: 1,
  values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
  className: 'slot3',
  textAlign: 'left'
 }
 ]
 };
 }
};

在实际操作中当我想使用picker来进行省份、城市、地区的选择时,发现最大的问题是搞不到符合该插件数据格式的数据,于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理,在这里,共享给大家:

使用mint-ui实现省市区三级联动效果的示例代码

onProvinceChange(picker, values) {
   
   this.province = picker.getValues()[0]
   var cityArr = [];
   for(var key in provinceCity[this.province]) {
   cityArr.push(key);
   }
   this.slots2[0].values = cityArr;
  },
  onCityChange(picker, values) {
   this.city = picker.getValues()[0]
   var countyArr = [];
   for(var key in provinceCity[this.province][this.city]) {
   countyArr.push(key);
   }
   this.slots3[0].values = countyArr;
  },
  onCountyChange(picker, values) {
   
   this.county = picker.getValues()[0]
  },

三组数据以及三个方法如上,当对省份进行选择时,动态匹配相应的城市,同理对城市进行选择时动态匹配相应的地区,如此就可以实现三级联动的效果了

以上这篇使用mint-ui实现省市区三级联动效果的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
vue实现分页加载效果
Dec 24 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue二级路由设置方法
Feb 09 #Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 #Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 #Javascript
Vuejs 单文件组件实例详解
Feb 09 #Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JS中Location使用详解
2015/05/12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python 错误和异常代码详解
2018/01/29 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
大学生志愿者感言
2014/01/15 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
地球一小时宣传标语
2014/06/24 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
入队仪式主持词
2015/07/04 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
vue实现简易音乐播放器
2022/08/14 Vue.js