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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
js实现常用排序算法
Aug 09 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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缓存类代码(附详细说明)
2011/06/09 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python中几个比较常见的名词解释
2015/07/04 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
创立科技Java面试题
2015/11/29 面试题
自我鉴定标准格式
2014/03/19 职场文书
加强作风建设工作总结
2014/10/23 职场文书
团委副书记工作总结
2015/08/14 职场文书
环保建议书范文
2015/09/14 职场文书
2016国培学习心得体会
2016/01/08 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python