我也是第一次写这种地址联动的

刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的

他说应该时这样的

于是第一想法 赶紧找插件吧

但是找了一会未果  就问了公司大神 他刚开始更我讲了滴滴的一个插件

但是不怎么好用 于是乎他又让我用了这个插件

首先使用方法

可以参考官网 http://mint-ui.github.io/#!/zh-cn 这里不多说了 因为下面还有很多内容

在一切准别就绪之后 你会发现官网上给的都很鸡肋 很少的东西

自己整理的思路时正确的  但是怎么实现 实在是想不起来

------------------------------------------------我是分界线--------------------------------------------

于是我开始 找度姨

首先你先找一个全国三级联动的地址json文件

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

一、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 '../component/address3.json'
  export default {
    name: '',
    components: {
    'mt-picker': Picker
  },
  props: {},
  data () {
    return {
      isShowAddress:false,
      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: {
    goBack (){
      this.$router.go(-1)
    },
    closeShowAddress (e){
      if(e.target == this.$refs.selectAddress){
        this.isShowAddress = !this.isShowAddress;
      }
    },
    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>

好了 帮大家整理好格式了 好看一点 真爱啊

对了 使用的时候注意一点 就是你的address.json 我刚开始复制这个的时候一直把这个json外部写一个【】

然后一直不出来汉字 只有第一列是数字 然后觉得自己好白痴

反正你把这些写上去就会有上图的效果了

——————————————补充——————————————

还有一些朋友不太明白我写的,出现了各种问题,我刚才又整理了一遍。再详细一些(我只能这样了)。

别忘记引入mint-ui的文件(希望大家学会看文档鸭~)

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
 
有的人出现的问题是因为address.json文件的问题,其实人家已经把下载地址写在上面了 ,为啥木有人看捏 (哭死啊)
我这里把三级联动的文件发出来吧 由于文章已经很长了 我会单独写一篇文章  有需要的直接复制就可以了
唉呀妈呀 当仙女可真累啊
三级联动json文件地址:https://www.cnblogs.com/WoAiZmm/p/10001426.html
格式自己整理吧(蜜汁微笑)

vue mint-ui 三级地址联动的更多相关文章

  1. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  2. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  3. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  4. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  5. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  6. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  7. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  8. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  9. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

随机推荐

  1. POJ 1087 A Plug for UNIX (网络流,最大流)

    题面 You are in charge of setting up the press room for the inaugural meeting of the United Nations In ...

  2. POJ 2187 Beauty Contest(凸包,旋转卡壳)

    题面 Bessie, Farmer John's prize cow, has just won first place in a bovine beauty contest, earning the ...

  3. 检测flash是否安装及版本号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Cocos2d-x 集成openinstall(Android)

    目的: 1. Cocos2d-x集成openinstall sdk? 有这么一个场景,甲给乙分享了链接,乙使用并下载APP,推荐者甲和乙的关系这个思路是怎样的? 你首先想到的也许会说,那当然就是给对方 ...

  5. Hadoop之Secondary NameNode

    NameNode存储文件系统的变化作为log追加在本地的一个文件里:这个文件是edits.当一个NameNode启动时,它从一个映像文件:FsImage,读取HDFS的状态,使用来自edits日志文件 ...

  6. WP-player——WordPress的一款好用的音乐插件

    作者的主页:http://webjyh.com/wp-player/ 安装:在WordPress后台搜索安装即可,或者去作者的主页下载安装. 使用方法:这个插件是通过短代码调用的,安装好插件之后便可以 ...

  7. WordPress修改标签云大小及颜色

    修改WordPress标签字体大小: 在cpanel面板中依次打开「wp-includes」→「category-template.php」,找到wp_tag_cloud, 1 2 3 4 5 6 7 ...

  8. 关于各种文件用Editplus的方式打开出现“向程序发送命令时出现问题”的解决方法

    其实网上有很多解决方法,但是我试过都没有用. 我出现这个错误的原因是因为我的Editplus是以管理员的方式运行的,所以解决的办法有两种: 一.修改Editplus的兼容性,方法如下: 首先在Edit ...

  9. java 多线程(总结)

    今天看了几篇关于java多线程问题的文章,将他们的部分内容引过来总结下,也算是对java多线程这类问题的整理. 在多线程中,必须明白两个问题,一是多线程实现,二是代码同步. 在java中要想实现多线程 ...

  10. c# 根据唯一码,存缓存 实现12小时内 阅读量+1

    需求:某一个详细页面需要实现用户 12小时内阅读量+1, 实现思路;得到一个唯一码的机器码,不管是否用户登录了 都有这个码,然后存到缓存里面 最后判断时间+12小时  是否超过当前时间 string ...