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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JS Timing
Apr 21 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
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初学者头疼问题总结
2006/10/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
深入理解Python中的*重复运算符
2017/10/28 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
运行Python编写的程序方法实例
2020/10/21 Python
单位消防安全制度
2014/01/12 职场文书
银行批评与自我批评
2014/02/10 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
施工员岗位职责
2015/02/10 职场文书
实习生个人总结范文
2015/02/28 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
困难补助申请报告
2015/05/19 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python