手把手教你webpack+vue+amaze-vue实现省市区三级联动选择组件
2017-12-11 10:48
966 查看
摘要: 手把手教你用vue+amaze-vue实现一个省市区三级联动组件
创建工程目录
使用
如果没有安装
在
接下来出现的提示可以参考下图
此时在浏览器中访问
删除
清空
编辑
编辑
##广告ಠ౪ಠ
amaze-vue是一只基于amazeui 和 vue.js的响应式组件库,项目刚刚起步,希望大家多多支持。
创建工程
创建工程目录 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相关文章推荐
- vue+webpack+amaze-vue实现省市区联动选择组件
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- vue+webpack实现异步组件加载
- [置顶] 用Vue、element-ui、axios实现省市区三级联动
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- vue+webpack实现异步组件加载的方法
- vue系列---基于 Element UI 的省市区街道联动选择组件
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- Android中使用开源框架citypickerview实现省市区三级联动选择
- javascript实现省市区三级联动选择的代码(数据为模拟json数据)
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)
- vue用mint-ui的picker组件封装一个省市区三级联动组件
- Vue.js中用webpack合并打包多个组件并实现按需加载
- 【2018最新的省市区】获取json,实现三级联动选择省市区(底部源码地址)
- Android省市区三级联动滚轮选择(真实项目中提取出来的组件)