Vue实现移动端三级联动_@郝晨光
2019-07-04 本文已影响142人
郝晨光
最近的项目中需要用到，所以自己手写了一个，拿出来分享。
首先，我们最后实现的是一个支持一级、二级、三级乃至多级联动的可复用组件，照例先看一下效果图，第一张是二级联动，第二张是三级联动。是我们实现的最终效果。
移动端二级联动.gif
移动端三级联动.gif
本文用到的知识点
- Vue组件绑定的v-model，参考：Vue在组件(非表单控件)上使用v-model双向数据绑定@郝晨光
- Vue的组件通信
- Vue的插槽
- 对Vue的API有一定的了解
- Vue的nextTick方法
- 对原生JS的拖拽有一定的功底
功能分析
- 暴露在最外层的，是显示在外部的被选择的文字，当点击的时候弹出选择器
- 内部的级联选择器的数量由外部决定，级联选择器的选项由外部决定
- 实现数据的双向绑定，内部修改外部改变，外部修改内部改变
- 确定按钮保存当前选中，取消按钮取消本次操作并返回上次选中
- 尽可能的只实现功能，暴露在外部的按钮的样式由外部操作
- 当点击时动画弹出选择器，确定和取消以及点击外部时收起选择器
定稿实现方式
- 由于级联选择器和选项的数量都由外部决定，所以直接拆分为三个组件（外层包裹、级联选择器、级联选项），全部暴露给开发者
- 对于外层包裹实现动画显示隐藏，以及数据双向绑定，对于级联选择器实现拖拽，数据修改及时发布、对于级联选项实现数据渲染
正式开始
先看一下我们最终使用的时候，是如何使用的吧
<!--
最外层h-selector绑定v-model对象形式，showValue指定文字显示规则，change事件监听只要对象发生变化就触发，
内部h-wrapper组件，表示需要几级联动，prop表示绑定父级v-model上的哪个属性，change事件可以监听到单个属性的变化，当前属性发生变化触发，返回当前属性的最新值，
h-option，选择项列表，遍历生成，value为v-model或者change事件返回的值，默认插槽可以用来显示文字，不写默认显示value值
-->
<h-selector v-model="address" :showValue="showAddress">
<h-wrapper prop="province">
<h-option
v-for="item in provinceList"
:key="item.id"
:value="item.id"
>
{{item.name}}
</h-option>
</h-wrapper>
<h-wrapper prop="city">
<h-option
v-for="item in cityList"
:key="item.id"
:value="item.id"
>
{{item.name}}
</h-option>
</h-wrapper>
</h-selector>
// script
// 数据是后台请求的，我这里就不贴出来了
data() {
address: {
province: '',
city: ''
}
},
computed: {
showAddress() {
let province = this.provinceList.find(item => item.id===this.address.province) || {name:'选择省'};
let city = this.cityList.find(item => item.id===this.address.city) || {name:'选择市'};
return `${province.name} - ${city.name}`;
}
}
对于我们的最终效果来说，是不是很简单呢？
当然，如果我这里写三个h-wrapper的话，我们自然而然就变成了三级联动
首先需要先定义最外层的slector组件
最外层的slector组件用来暴露在外部显示的文字，以及控制级联选择器的显示隐藏，在每一次开始一个新的功能的时候，我们应该先完成重点的功能，重点功能完成之后，再去修改一些样式包括交互效果
- 在实施整个组件之前，其实我对最外层的selector组件并没有做太多的事情，因为我们的级联选择器是需要定位的，所以无论外层什么样子，都不会对我们的功能造成影响
- 一起来看一下最终的h-selector组件的模板
<template>
<div class="h-selector">
<!-- 显示在外部的内容，可以显示组件内部计算的数据值，也可以显示外部传入的显示文字 -->
<div class="h-selector-show" @click="showAddress">
{{showValue || defaultShowValue}}
</div>
<!-- 显示隐藏的移动动画，使用Vue的 transition组件实施 -->
<transition name="h-selector-move">
<!-- 级联选择器外层的容器，用于显示隐藏，以及级联选择器头部和内容的显示 -->
<div class="h-selector-container" v-if="show">
<!-- 级联选择器的头部，取消按钮，确定按钮，以及显示的标题 -->
<div class="h-selector-header">
<div @click="cancel" class="h-selector-header-cancel">取消</div>
<div class="h-selector-header-title">{{title}}</div>
<div @click="confirm" class="h-selector-header-confirm">确定</div>
</div>
<!-- 包裹级联选择器的容器 -->
<div class="h-selector-content">
<!-- 使用插槽，将外部的级联选择器显示到当前组件内，成为当前组件的子组件 -->
<slot></slot>
<div class="h-selector-bg"></div>
</div>
</div>
</transition>
<!-- 遮罩层，淡入淡出动画 -->
<transition name="h-selector-fade">
<div class="h-selector-layer" v-if="show" @click="cancel"></div>
</transition>
</div>
</template>
对于这个模板来说，需要解释的地方很少，我都写在注释里边
- 接着，我们看一下最终的逻辑部分
<script>
export default {
name: "hSelector",
props: {
value: { // 数据双向绑定所必须的属性
type: Object, // 期待接收一个Object的值
required: true // 必填的
},
showValue: { // 由外部定义显示在外层的内容
type: String,
},
title: { // 定义级联选择器的标题
type:String, // 接收字符串类型
default: '' // 默认为空字符
}
},
data() {
// 定义oldValue用来保存上一次的值，使用Object.assign拷贝一份，避免与绑定的value发生冲突
let oldValue = Object.assign({}, this.value);
return {
oldValue, // 保存上一次修改的值
show: false // 定义显示隐藏
}
},
computed: {
defaultShowValue() { // 定义默认显示的内容，建议使用外部定义的内容显示，内部只做了非常简单的处理
let arr = [];
for (let i in this.value) {
arr.push(i + ':' + this.value[i])
}
return arr.join('/');
}
},
mounted() {
// Vue实例都拥有的$on方法，监听的是从wrapper发布的changeSelected事件，触发this.changeSelected方法
this.$on('changeSelected', this.changeSelected);
},
// 定义方法
methods: {
// 修改当前选中的值，实现数据双向绑定的方法
changeSelected(prop, value) { // 接收两个参数，prop代表需要修改对象的哪个属性，value代表修改的值
let obj = {};
obj[prop] = value;
// 使用Object.assign将新的值与旧的值合并覆盖，并向外部发布新的值
let obj2 = Object.assign({}, this.value, obj);
this.$emit('input', obj2);
},
// 取消功能，将上一次的数据发送回外部，并隐藏级联选择器
cancel() {
this.$emit('input', this.oldValue);
this.show = false;
},
// 确定功能，将本次修改的值保存，并保存在oldValue中，以供下次使用
confirm() {
this.oldValue = Object.assign({}, this.value);
this.$emit('change', this.value);
this.show = false;
},
// 控制级联选择器显示
showAddress() {
this.show = true;
}
}
}
</script>
首先需要重点提一下的是在mounted方法中，我们使用了this.$on方法，订阅了一个在当前组件内并没有发布的事件，这个事件，我定义在了h-wrapper这个组件中，稍后可以看到
其余的地方没有太复杂的功能和逻辑，就不一一解释
接着定义最主要的部分，就是我们的wrapper组件
- 模板部分
<template>
<!-- 包裹级联选择器的容器，限制高度，并设置overflow: hidden;
高度使用数据的方式动态修改 -->
<div class="h-selector-wrapper" :style="{height: parentHeight+'px'}">
<!-- 级联选择器的真实节点，无序列表
ref属性用来获取真实的DOM节点
style通过数据去设置样式
监听需要用到的事件
touchstart 触摸开始
touchmove 触摸移动
touchend 触摸结束
transitionend 过渡结束
-->
<ul
ref="wrapper"
:style="style"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)"
@transitionend="transitionEnd($event)"
>
<!-- 使用四个空的option来保证可选项的位置，无需动态的通过js修改 -->
<li class="h-selector-option">
</li>
<li class="h-selector-option">
请选择
</li>
<!-- 插槽位置，所有的option可选项都会显示在这里 -->
<slot></slot>
<li class="h-selector-option">
</li>
<li class="h-selector-option">
</li>
</ul>
</div>
</template>
在模板中，需要重点关注的其实就是两个style，以及四个事件，当然了，还有插槽的位置，我这里使用了一个小技巧，在原始位置直接写好了四个option，并且其中一个还显示请选择，用来保证可选项的位置永远都可以处在最中间的位置
-
逻辑部分（重中之重）
关于逻辑的部分我全部写在了注释中，请仔细研读
<script>
export default {
name: 'hWrapper',
// 接收prop数据，表示需要操作父组件中value对象上的某个指定数据
props: {
prop: {
type: String,
required: true
}
},
// 定义初始化数据
data() {
return {
// 初始化样式
style: {
transform: 'translate3d(0px,0px,0px)',
transition: 'transform .3s',
},
activeIndex: 0, // 当前激活的索引
startY: 0, // 开始距离
startTime: 0, // 开始时间
endY: 0, // 结束距离
endTime: 0, // 结束时间
prevY: 0, // 上一次移动的距离
direction: 0, // 滑动方向
maxY: 0, // 滑动最大距离
minY: 0, // 滑动最小距离
optionHeight: 0, // 每一个选项的高度
parentHeight: 0, // 父容器的高度
optionLength: 0 // 选项的长度
}
},
// 计算属性
computed: {
// 得到父组件中，当前级联选择器所绑定的那一条数据
propValue() {
return this.$parent.value[this.prop];
}
},
// 侦听器
watch: {
// 侦听activeIndex的变化
activeIndex(newValue) {
// 当activeIndex发生变化，并且可以通过这个新的索引找到对应子组件时
if (this.$children[newValue]) {
// 调用父组件的$emit方法，发布changeSelected事件
// 将当前绑定的属性和当前的值发布出去
// 由于父组件的mounted函数中，使用$on订阅了这个事件
// 所以父组件能够正确的收到通信
this.$parent.$emit('changeSelected', this.prop, this.$children[newValue].value);
}
},
// 侦听当前级联选择器的数据
propValue(newValue) {
// 当数据发生改变的时候，向外发布change事件，并将新的值发布在外
this.$emit('change', newValue);
// 重置当前级联选择器的位置
this.formatAddress();
}
},
// 实例挂载完成
mounted() {
// 调用Vue的$nextTick方法，在下一次DOM刷新完成之后调用方法
this.$nextTick(() => {
// 重置数据
this.formatData();
// 重置当前级联选择器的位置
this.formatAddress();
});
// 由于是移动端的demo、所以顺便订阅resize事件，当屏幕大小发生改变的时候再次重置选择器
window.addEventListener('resize', () => {
this.formatData();
this.formatAddress();
})
},
// 当组件数据更新完成
updated() {
// 调用Vue的$nextTick方法，在下一次DOM刷新完成之后调用方法
this.$nextTick(() => {
// 重置数据
this.formatData();
// 重置当前级联选择器的位置
this.formatAddress();
})
},
methods: {
// 重置数据的方法
formatData() {
// 保存当前的子组件，使用this.$children获取到的是当前组件所有的子组件（子Vue实例）
let children = this.$children;
// 保存当前选项的长度
this.optionLength = children.length;
// try {
// this.optionHeight = children[0].$el.offsetHeight;
// } catch {
// 保存当前option的高度
this.optionHeight = this.$refs['wrapper'].children[0].offsetHeight;
// }
// 为最外层的父元素设置高度，高度为option的5倍，即一次显示5个option
this.parentHeight = this.optionHeight * 5;
// 保存滑动的最大高度
this.maxY = -this.optionHeight * (this.optionLength - 1);
},
// 重置级联选择器位置
formatAddress() {
// 保存当前组件的子组件
let children = this.$children;
// 查询到当前组件中与外层传入的数据对应的子组件的索引值
let index = children.findIndex(item => item.value === this.$parent.value[this.prop]);
// 将索引值赋予activeIndex，如果能查找到对应的，说明外部传值了，
// 就自动滑动到当前索引的位置，否则就显示请选择
this.activeIndex = index > -1 ? index : -1;
// 通过索引值与当前option的高度计算距离，并执行动画
this.style.transform = `translate3d(0px,${-this.activeIndex * this.optionHeight}px,0px)`;
},
// 触碰开始
touchStart(e) {
// 保存触碰开始的位置
this.startY = e.touches[0].pageY;
// 保存触碰开始的时间
this.startTime = e.timeStamp;
// 清除过渡动画
this.style.transition = 'none';
},
// 触碰移动
touchMove(e) {
// 保存当前移动的位置
let moveY = e.changedTouches[0].pageY;
// 保存当前移动的方向，往下拉的话，moveY - this.startY为正，往上拉的话为负
this.direction = moveY - this.startY;
// 设置拖拽移动
this.style.transform = `translate3d(0px,${this.prevY + this.direction}px,0px)`;
},
// 触碰结束
touchEnd(e) {
// 设置过渡动画
this.style.transition = 'transform .4s';
// 保存结束位置
this.endY = e.changedTouches[0].pageY;
// 保存结束时间
this.endTime = e.timeStamp;
// 保存上一次移动的距离
this.prevY = this.style.transform.split(',')[1].slice(0, -2) * 1;
// 计算当前移动到的位置索引
let activeIndex = -Math.round(this.prevY / this.optionHeight);
// 计算当前手指从触碰开始到结束移动的距离
let distance = Math.abs(this.endY - this.startY);
// 计算当前手指从触碰开始到结束的时间差
let interval = this.endTime - this.startTime;
// 根据方向不同来计算应该移动到对应的索引值上
// 大于0 为向下拉
if (this.direction > 0) {
// 通过距离与时间差来计算最新的坐标索引
activeIndex = this.activeIndex - Math.round(distance / interval) * 2;
// 小于 0 为向上拉
} else if (this.direction < 0) {
// 通过距离与时间差来计算最新的坐标索引
activeIndex = this.activeIndex + Math.round(distance / interval) * 2;
}
// 判断当前移动距离特别小，判定为触碰事件，而不是滑动
if (distance <= 1) {
// e.path 保存了触发当前事件的源数组、0号元素代表当前点击的option
// 通过当前点击的元素的offsetTop计算当前元素正确的索引值
activeIndex = Math.round((e.path[0].offsetTop - this.optionHeight * 2) / this.optionHeight);
}
// 对activeIndex值进行进一步处理，保证其不会超出选项范围
activeIndex = activeIndex < 0 ? 0 : activeIndex > this.optionLength - 1 ? this.optionLength - 1 : activeIndex;
// 执行判断并赋值索引
this.activeIndex = activeIndex;
// 通过索引值计算位移，并执行动画
this.style.transform = `translate3d(0px,${-this.activeIndex * this.optionHeight}px,0px)`;
},
// 过渡结束
transitionEnd() {
// 保存上一次移动的距离
this.prevY = -this.activeIndex * this.optionHeight;
}
}
}
</script>
在逻辑中，我通过操作activeIndex这个索引值来动态的修改数据中ul的位移，使得当前永远显示的是对应索引与option高度计算出的位置
通过touchstart、touchmove、touchend三个事件来操作元素的位置与滑动
通过watch侦听对应属性，并实时触发事件，使得级联选择器发生改变，达到内外同步
通过mounted与updated钩子函数来保证当前的级联选择器属性会随着刷新而刷新
通过slot插槽来显示外部传入的option选项
最后是option组件
对于option组件来说，并没有多少内容，它只需要负责显示数据，以及让级联选择器可以正确的获取到值即可
<template>
<li class="h-selector-option">
<slot>{{value}}</slot>
</li>
</template>
<script>
export default {
name: "hOption",
props: {
value: {
type: [String,Number],
required: true
}
}
}
</script>
样式问题
首先当前这个级联选择器的样式，我没有做太多的处理，但是已经很好看了有没有！
注意： 在外部显示的内容,h-selector-show并没有做过多的样式处理，将样式设置完全交予外部处理，保证你可以根据你的需求来设置样式
注意：由于我们开发的是移动端的demo，而移动端对固定定位fixed并不是很支持，所以我样式方面使用了absolute绝对定位，造成的问题就是在当前级联选择器的外层最好不要有任何的定位元素，否则会造成影响
.h-selector {
letter-spacing: 1px;
font-size: 16px;
width: 100%;
height: 100%;
.h-selector-show {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.h-selector-container {
position: absolute;
z-index: 999;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
}
.h-selector-layer {
position: absolute;
background: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.h-selector-header {
display: flex;
align-items: center;
height: 40px;
justify-content: space-between;
padding: 0 30px;
.h-selector-header-cancel {
color: #e9aa14;
}
.h-selector-header-confirm {
color: #508aff;
}
}
.h-selector-content {
display: flex;
width: 100%;
position: relative;
}
.h-selector-wrapper {
flex: 1;
overflow: hidden;
& + .h-selector-wrapper {
border-left: 1px solid #ddd;
}
}
.h-selector-option {
line-height: 60px;
height: 60px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.h-selector-bg {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.7)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
backface-visibility: hidden;
pointer-events: none;
background-repeat: no-repeat;
background-position: top, bottom;
background-size: 100% 100px;
}
.h-selector-move-enter-to, .h-selector-move-leave {
transform: translate3d(0, 0, 0);
}
.h-selector-move-enter-active, .h-selector-move-leave-active {
transition: transform .6s;
}
.h-selector-move-enter, .h-selector-move-leave-to {
transform: translate3d(0, 100%, 0);
}
.h-selector-fade-enter-to, .h-selector-fade-leave {
opacity: 1;
}
.h-selector-fade-enter-active, .h-selector-fade-leave-active {
transition: opacity .4s;
}
.h-selector-fade-enter, .h-selector-fade-leave-to {
opacity: 0;
}
}
最终，我们就已经成功的打造了一款移动端的级联选择器，可以实现一级二级三级联动，当然了，多级也没有任何问题，但是在移动端，我建议最多到三级联动，否则的话影响用户体验感
