vue基于mint-ui实现城市选择三级联动


Posted in Javascript onJune 30, 2020

项目是基于vue2 的移动端项目,供大家参考,具体内容如下

1、实际效果

vue基于mint-ui实现城市选择三级联动

地址三级联动 mint-ui picker.png

2、首先你需要去下载一个包含中国省份,城市,区县的数据

如下:
(这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)
(一个更好的中国地区数据,推荐用这个)

3、具体代码

主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网

Ⅰ、html组件

<div>
 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
 <p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>

Ⅱ、组件方法

 

<script>
 import { Picker } from 'mint-ui';
 import myaddress from '../../../static/address3.json' //引入省市区数据
 export default {
 name: '',
 components: {
 'mt-picker': Picker
 },
 props: {},
 data () {
 return {
 myAddressSlots: [
  {
  flex: 1,
  defaultIndex: 1, 
  values: Object.keys(myaddress), //省份数组
  className: 'slot1',
  textAlign: 'center'
  }, {
  divider: true,
  content: '-',
  className: 'slot2'
  }, {
  flex: 1,
  values: [],
  className: 'slot3',
  textAlign: 'center'
  },
  {
  divider: true,
  content: '-',
  className: 'slot4'
  },
  {
  flex: 1,
  values: [],
  className: 'slot5',
  textAlign: 'center'
  }
 ],
 myAddressProvince:'省',
 myAddressCity:'市',
 myAddresscounty:'区/县',
 }
 },
 created() {


 },
 methods: {
 onMyAddressChange(picker, values) {
 if(myaddress[values[0]]){ //这个判断类似于v-if的效果(可以不加,但是vue会报错,很不爽)
  picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组,当前省的数组
  picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
  this.myAddressProvince = values[0];
  this.myAddressCity = values[1];
  this.myAddresscounty = values[2];
 }
 },
 },
 mounted(){
 this.$nextTick(() => { //vue里面全部加载好了再执行的函数 (类似于setTimeout)
 this.myAddressSlots[0].defaultIndex = 0 
 // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
 //因为我没有看过源码(我猜测是因为数据没有改变,不会触发更新)
 });
 }
 }
</script>

参考文章 vue mint-ui 实现省市区街道4级联动(mint-ui picker 的四级联动)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
Javascript验证方法大全
Sep 21 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
You might like
php数组(array)输出的三种形式详解
2013/06/05 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python实现名片管理器的示例代码
2019/12/17 Python
pytorch SENet实现案例
2020/06/24 Python
python如何实现word批量转HTML
2020/09/30 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
安全生产汇报材料
2014/02/17 职场文书
职业生涯规划书前言
2014/04/15 职场文书
企业文化宣传标语
2014/06/09 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
学年个人总结范文
2015/03/05 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android