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

用mint-ui中的picker组件封装的省市区插件（使用环境：vue-cli），demo下载地址：
https://download.csdn.net/download/yanzyan/10516230
<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>  <style scoped> </style>
点击出现省市区插件方法为select, address为选择的地址。
em…以上就是调用的方式。
自测过基本上没什么问题，欢迎大家一起讨论交流。
数据格式是参考iosselect的数据格式来的。
如图，通过parentId建立数据之间的关联。

热门工具换一换