vue省市区三级联动插件（使用mint-ui的picker）

用mint-ui中的picker组件封装的省市区插件（使用环境：vue-cli），demo下载地址：https://download.csdn.net/download/yanzyan/10516230

下载后，使用npm install命令生成node_modules文件夹，再使用npm run dev命令启动项目，看是否是你需要的。

效果图：

如何在自己项目中使用？

• 此插件基于mint-ui。需要在项目中先下载mint-ui

npm i mint-ui --save-dev    

mint-ui安装好后，在main.js中导入mint-ui

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

如图所示：

• 将select.vue粘贴到components目录下。
  在index.js中注册该组件。
  

• 需要省市区插件的组件中调用select组件

<template>
  <div>
    <mt-button type="primary" @click="select">选择省市区</mt-button>
    <p :value="address">{{address}}</p>
    <yz-select v-if="show" :ref="show" @changeValue='isShow' :province='province' :city='city' :county='county'></yz-select>
  </div>
</template>

<script>
import select from '@/components/select'
export default {
  name: 'HelloWorld',
  data () {
    return {
      show: false,
      address: '',
      province: '北京市',
      city: '北京市',
      county: '东城区'
    }
  },
  components:{
    'yz-select': select
  },
  methods: {
    select(){
            this.show = true;
    },
    isShow(msg){
            console.log(msg);
            this.show = msg.show;
            this.address = msg.result;
            this.province = msg.province;
            this.city = msg.city;
            this.county = msg.county;
        }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

点击出现省市区插件方法为select, address为选择的地址。
em…以上就是调用的方式。
自测过基本上没什么问题，欢迎大家一起讨论交流。
数据格式是参考iosselect的数据格式来的。
如图，通过parentId建立数据之间的关联。