vue+webpack+amaze-vue实现省市区联动选择组件
2017-12-08 20:58
876 查看
创建工程
创建工程目录 vue-city-picker
使用vue-cli
初始化webpack工程
如果没有安装vue-cli的同学请走 传送门
在
vue-city-picker同级目录下执行
vue init webpack vue-city-picker
接下来出现的提示可以参考下图
npm安装amaze-vue
cd vue-city-picker npm npm install amaze-vue --save npm install
开发准备
启动webpack-dev-server
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>
实现效果
效果图
代码
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的响应式组件库,项目刚刚起步,希望大家多多支持。项目地址
amaze-vue使用文档
document相关文章推荐
- 手把手教你webpack+vue+amaze-vue实现省市区三级联动选择组件
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- Vue.js中用webpack合并打包多个组件并实现按需加载
- vue系列---基于 Element UI 的省市区街道联动选择组件
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue+webpack实现异步组件加载
- vue+webpack实现异步组件加载的方法
- vue+webpack 实现组件按需引入
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能
- Webpack + vue-loader构建单文件vue组件
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- 利用webpack和vue实现组件化
- vue做的单页面组件(单文件组件)不起作用,webpack已经打包成功,页面中没有结果
- Vue.js组件tree实现省市多级联动
- Android中使用开源框架Citypickerview实现省市区三级联动选择