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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
使用JS读秒使用示例
Sep 21 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
十八大标语口号
2014/10/09 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python