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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
一些mootools的学习资源
Feb 07 Javascript
常用的javascript设计模式
Jan 11 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
jQuery实现影院选座订座效果
Apr 13 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 一个页面执行时间类代码
2010/03/05 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
python 循环遍历字典元素的简单方法
2016/09/11 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python 实现Harris角点检测算法
2020/12/11 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
工程建设实施方案
2014/03/14 职场文书
操行评语大全
2014/04/30 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
公司岗位说明书
2015/10/08 职场文书
决心书格式及范文
2019/06/24 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
app场景下uniapp的扫码记录
2022/07/23 Java/Android