vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动 && 附全国省市区json文档）

最近在学习Mint-ui，想实现仿淘宝的添加收获地址的功能。在网上寻找类似样例，发现无非是仅有一个地址的三级联动效果，未结合弹出框mt-popup，且大多数没有详细的注释。自己实现后来分享一下~

1. 淘宝的添加收获地址页面

我们想要实现的效果是在点击选择地区的时候，从底部显示弹出框，弹出框中可以实现地址的三级联动

2. 需要哪些组件

• Cell组件：实现单元格，其语法结构为：

<mt-cell title="标题" label="备注信息" :value="内容" isLink to="URL地址"></mt-cell>

isLink属性用于控制单元格是否为可点击的链接，布尔类型，默认为true

• Popup组件：实现弹出框，其语法结构为：

<mt-popup v-model="变量名称" position="弹出框位置" ></mt-popup>

v-model所绑定的变量用于控制是否显示弹出框，布尔类型
position属性用于控制弹出层的位置（top | right | bottom | left）

• Picker组件：用于实现选择器，其语法结构为：

<mt-picker :slots='slots' @change='handler'></mt-picker>

slots:[
        {
   
          values:[]
        },
        {
   
          divider: 是否显示分隔符
          content: 分隔符显示的文本
        },
        {
   
          values:[]
        }
        ...
]

1. slots：绑定到 slots 属性的数组由对象组成
2. change事件：传入 slots，当被选中的值发生变化时触发 change 事件。
   change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组
3. 在 change 事件中，可以使用注册到 picker 实例上的一些方法，但在我们要实现的页面功能中只会用到如下方法：
  * setSlotValues(index, values)：设定给定 slot 的备选值数组 *

3. 代码实现

下列代码中引入的pca.json文件为全国省市区的json文档
记得引入mint-ui~

<template>
  <div>
    <mt-header title