vue基于mint-ui的城市选择3级联动的示例


Posted in Javascript onOctober 25, 2017

项目是基于 vue2 的移动端项目

1、实际效果

vue基于mint-ui的城市选择3级联动的示例

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

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

如下:

https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)

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>

参考文章https://3water.com/article/125935.htm(mint-ui picker 的四级联动)

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

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Angular8基础应用之表单及其验证
Aug 11 Javascript
浅谈Vue的加载顺序探讨
Oct 25 #Javascript
JavaScript模块模式实例详解
Oct 25 #Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 #Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 #Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
You might like
几个学习PHP的网址
2006/11/25 PHP
php读取xml实例代码
2010/01/28 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python中web框架的自定义创建
2019/09/08 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python切割图片的示例
2020/11/12 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL