vue省市区三联动下拉选择组件的实现


Posted in Javascript onApril 28, 2017

我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用

我们今天来实现一个 利用vuejs开发的 省市区三联动的组件  CitySelect.vue组件

首先来看一下最终的效果(没有写太多的样式...)

vue省市区三联动下拉选择组件的实现

组件所需要的省市区的JSON数据(已经封装为commonjs模块了):    provinces.js

这个数据中有这样几个字段:

code: 当前省市区的编码

sheng: 当前所在的省

name: 省市区的名字

level: 级别,省 level = 1, 市 level=2, 区/县城 level = 3

di: 县,市级别的区分

如何使用?

这里采用了 v-model暴露接口, 所以我们下拉选择的值,你只需要在 v-model绑定的属性中去拿即可

我们使用的字段是  cityInfo用于接收组件的数据, 组件为了返回足够的数据, 它是一个对象

使用代码示例  : 

App.vue

<template>
 <div id="app">
 <h5>vue 省市区三联动 demo</h5>
 <city-select v-model="cityInfo"></city-select>
 <h6>v-model的值是 <code>{{ cityInfo }}</code></h6>
 <h6>从v-model得知,你选择了 <i>{{ cityName }}</i></h6>
 </div>
</template>
<script>
 import CitySelect from './components/CitySelect.vue'
 export default {
 data() {
 return {
 cityInfo: '',
 }
 },
 components: {
 CitySelect
 },
 computed: {
 cityName() {
 const names = [];
 this.cityInfo.province && names.push(this.cityInfo.province.name + ' ')
 this.cityInfo.city && names.push(this.cityInfo.city.name + ' ')
 this.cityInfo.block && names.push(this.cityInfo.block.name + ' ')
 return names.join('')
 }
 }
 }
</script>
<style lang="stylus">
 h6
 padding 10px
 border 1px dotted
 h6 i
 color #f00
 border 1px dotted #ccc
</style>

cityName是我们需要展示的数据,作为一个计算属性而存在,因为这个值是不断变化的,从cityInfo中抽取出来的数据

下面我们来看一下组件的实现代码

CitySelect.vue

<template>
 <div class="city-select">
 <select v-model="selectedProvince" name="province">
 <option v-for="(item, index) in provinces"
 v-if="item.level === 1"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 <select v-model="selectedCity" name="city">
 <option
 v-for="(item, index) in cities"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 <select v-model="selectedBlock" name="block">
 <option
 v-for="(item, index) in blocks"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 </div>
</template>
<script>
/**
 * 省 市 区/县城 三联动选择器
*/
import provinces from './provinces.js'
import Vue from 'vue'
export default {
 name: 'app',
 created() {
 // 数据初始化,默认选中北京市,默认选中第一个;北京市数据为总数据的前18个
 let beijing = this.provinces.slice(0, 19)
 this.cities = beijing.filter(item => {
 if (item.level === 2) {
 return true
 }
 })
 this.selectedCity = this.cities[0]
 this.blocks = beijing.filter(item => {
 if (item.level === 3) {
 return true
 }
 })
 this.selectedBlock = this.blocks[0]
 },
 watch: {
 selectedProvince(newVal, oldVal) {
 // 港澳台数据只有一级,特殊处理
 if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
 this.cities = [newVal]
 this.blocks = [newVal]
 } else {
 this.cities = this.provinces.filter(item => {
  if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
  return true
  }
 })
 }
 var _this = this
 // 此时在渲染DOM,渲染结束之后再选中第一个
 Vue.nextTick(() => {
 _this.selectedCity = _this.cities[0]
 _this.$emit('input', _this.info)
 })
 },
 selectedBlock() {
 var _this = this
 Vue.nextTick(() => {
 _this.$emit('input', _this.info)
 })
 },
 selectedCity(newVal) {
 // 选择了一个市,要选择区了 di是城市的代表,sheng
 if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
 this.blocks = [newVal]
 this.cities = [newVal]
 } else {
 this.blocks = this.provinces.filter(item => {
  if (item.level === 3 && item.sheng && item.sheng == newVal.sheng && item.di === newVal.di && item.name !== '市辖区') {
  return true
  }
 })
 }
 var _this = this
 Vue.nextTick(() => {
 _this.selectedBlock = _this.blocks[0]
 // 触发与 v-model相关的 input事件
 _this.$emit('input', _this.info)
 })
 }
 },
 computed: {
 info() {
 return {
 province: this.selectedProvince,
 city: this.selectedCity,
 block: this.selectedBlock
 }
 }
 },
 data() {
 return {
 selectedProvince: provinces[0],
 selectedCity: 0,
 selectedBlock: 0,
 cities: 0,
 provinces,
 blocks: 0
 }
 }
}
</script>
<style lang="stylus" scoped>
 .city-select select
 outline 0
</style>

组件关键点说明:

HTML模板采用三个 select下拉控件,分别具有v-model由于绑定选择的数据,使用v-for遍历省市区数据

data中的数据,分别是选中的省市区的值(对象形式); 以及当前这个省的城市,这个城市的区,见名知意

在create钩子函数中我们进行了数据的初始化,默认我们显示北京相关的信息,改变v-model对应的属性值

实现三联动的重点:

我们使用watch监测当前省市区的改变(v-model中绑定的数据),一旦省 有变化,就需要拉取这个省相关的数据,并且默认选中第一条数据;  市,区的变化类似。

在这里我们采用了 ES5中的filter来进行数据的过滤,我们只要把数据过滤出来了,vue自动帮我们重新渲染,所以我们只需要把重点放在数据的筛选上就可以了

v-model接口的暴露:

要将数据绑定到v-model所绑定的属性上,需要通过触发 input事件,参见 v-model的实现原理这篇文章

Vue.nextTick(() => {
 _this.$emit('input', _this.info)
 })

也就是这行代码实现了组件内部数据暴露的效果: v-model所绑定的cityInfo拿到了组件内部的值

这里的 nextTick类似于setTimeout实现的效果,可以在执行完其他任务(例如渲染DOM)之后再执行相应的回调,我们使用它,可以保证我们的下一步操作是在DOM渲染完毕之后再执行的,保证逻辑的正确性

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
AngulaJS路由 ui-router 传参实例
Apr 28 #Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 #Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 #Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 #Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
js返回顶部实例分享
2016/12/21 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python ZipFile模块详解
2013/11/01 Python
python多重继承实例
2014/10/11 Python
Django视图和URL配置详解
2018/01/31 Python
Django自定义manage命令实例代码
2018/02/11 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
师范毕业生个人求职信
2013/12/09 职场文书
全陪导游欢迎词
2014/01/17 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
校园安全教育心得体会
2016/01/15 职场文书