脚本宝典收集整理的这篇文章主要介绍了vue+webpack+amaze-vue实现省市区联动选择组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue-cITy-picker
vue-cli
初始化webpack工程在vue-city-picker
同级目录下执行
vue init webpack vue-city-picker
接下来出现的提示可以参考下图
cd vue-city-picker
npm npm install amaze-vue --save
npm install
npm run dev
此时在浏览器中访问http://127.0.0.1:8080/
就可以访问了
src/assets
src/components
src/App.vue
将提示准备好的location.js
文件拷贝到src
目录下。
同学可以根据自己的情况自己拷入城市数据,代码里提供的数据仅供参考。
src/main.js
引入amaze-vue组件库import Vue from 'vue'
import App from './App'
import AmazeVue from 'amaze-vue';
import 'amaze-vue/dist/amaze-vue.css';
Vue.config.productionTip = false
Vue.use(AmazeVue);
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
src/App.vue
<template>
<div class="container">
<section class="city-picker">
<am-select @select="proviceHandle" :options="province" seArch placeholder="请选择省、直辖市"></am-select>
<am-select v-if="city.length > 0" @select="cityHandle" search :options="city" placeholder="请选择市、区"></am-select>
<am-select v-if="county.length > 0" @select="countyHandle" search :options="county" placeholder="请选择区、县"></am-select>
</section>
<p v-if="address">您选择的是:<span class="am-text-success">{{ address }}</span></p>
</div>
</template>
<script>
import locationData from './location';
export default {
name: 'city-picker',
data() {
const province = [];
for (let code in locationData) {
let item = locationData[code];
province.push(Object.assign(item, {
label: item.name
}));
}
return {
province,
city: [],
county: [],
selectProvince: null,
selectCity: null,
selectCounty: null
};
},
methods: {
proviceHandle(value) {
const city = [];
for (let code in value.cities) {
let item = value.cities[code];
city.push(Object.assign(item, {
label: item.name
}));
}
this.city = city;
this.county = [];
this.selectProvince = value.name;
this.selectCity = null;
this.selectCounty = null;
},
cityHandle(value) {
const county = [];
for (let code in value.districts) {
let item = value.districts[code];
county.push({
code,
label: item,
name: item
});
}
this.county = county;
this.selectCity = value.name;
this.selectCounty = null;
},
countyHandle(value) {
this.selectCounty = value.name;
}
},
computed: {
address() {
const { selectProvince, selectCity, selectCounty } = this;
return (selectProvince ? selectProvince : '') +
(selectCity ? ',' + selectCity : '') +
(selectCounty ? ',' + selectCounty : '');
}
}
}
</script>
<style>
.container {
width: 800px;
height: 800px;
padding-top: 80px;
margin: auto;
}
.city-picker {
margin-bottom: 20px;
}
</style>
@H_702_126@
https://github.COM/sunshineJi/vue-city-picker
git clone https://github.com/sunshineJi/vue-city-picker.git
cd vue-city-picker
npm i
npm run dev
此demo只是提供一个思路去解决联动选择的问题,线上需求还请使用的同学根据具体情况优化代码后使用。
amaze-vue是一只基于amazeui 和 vue.js的响应式组件库,项目刚刚起步,希望大家多多支持。
以上是脚本宝典为你收集整理的vue+webpack+amaze-vue实现省市区联动选择组件全部内容,希望文章能够帮你解决vue+webpack+amaze-vue实现省市区联动选择组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。