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中的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建立数据之间的关联。
更多推荐
已为社区贡献3条内容
所有评论(0)