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 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
python实现的系统实用log类实例
2015/06/30 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
产假请假条
2014/04/10 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL