使用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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
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
escape unescape的php下的实现方法
2007/04/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
django API 中接口的互相调用实例
2020/04/01 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
争论的故事教学反思
2014/02/06 职场文书
工程师岗位职责规定
2014/02/26 职场文书
党委班子剖析材料
2014/08/21 职场文书
2015元旦节寄语
2014/12/08 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang