在 mint-ui 中，picker 是很常用也比较复杂的一个组件，让我们拆解这个组件看看它是如何实现的。
整体结构
来看看 picker 的整体结构：
picker.vue
<div class="picker" :class="{ 'picker-3d': rotateEffect }">
<!-- 顶部工具栏区域 -->
<div class="picker-toolbar" v-if="showToolbar"><slot></slot></div>
<div class="picker-items">
<!-- picker 列 -->
<picker-slot v-for="slot in slots"></picker-slot>
<!-- 标识选中区域 -->
<div class="picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
</div>
</div>
从代码中可以发现单个滚动组件其实是 picker-slot 组件，而 picker 只是做了个外部容器并且提供了各种 set 和 get 方法用来操作组件和获取数据。下面是 picker 提供的方法
picker 中的方法
method: {
slotValueChange () {}, // 触发 picker 的 change 事件
getSlot (slotIndex) {}, // 过去某一列 slot
getSlotValue (index) {}, // 获取某一列 slot 的当前值
setSlotValue (index, value) {}, // 设置某一列 slot 的当前值
getSlotValues (index) {}, // 获取 slot 的 values
setSlotValues (index, values) {}, // 设置 slot 的 values
getValues () {}, // 获取多个组件合成的值
setValues (values) {} // 同时设置多列 slot 的值
}
然后看下 picker-slot 组件的整体结构~
picker-slot.vue
<div class="picker-slot" :class="classNames" :style="flexStyle">
<div v-if="!divider" ref="wrapper" class="picker-slot-wrapper" :class="{ dragging: dragging }" :style="{ height: contentHeight + 'px' }">
<div class="picker-item" v-for="itemValue in mutatingValues" :key="itemValue" :class="{ 'picker-selected': itemValue === currentValue }" :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
{{ typeof itemValue === 'object' && itemValue[valueKey] ? itemValue[valueKey] : itemValue }}
</div>
</div>
<div v-if="divider">{{ content }}</div>
</div>
从 HTML 源码中可以看出：这里使用了 divider 属性来决定显示内容还是分隔符。如果 divider=true 那么直接显示 <div v-if="divider">{{ content }}</div> 分隔符元素，否则显示 picker 选项列表。
而 picker 选项列表其实就是使用 v-for 遍历渲染的一组元素列表，通过 CSS 的 translate 属性偏移元素以达到移动选择器的功能。可以从 dom 结构中找到具体的样式~
结构
所以，小结下：picker 只是容器，而 picker-slot 显示了单列选项列表，并通过 translate 偏移实现选中效果。一个 picker 是由一个或多个 picker-slot 组件组成。
事件监听
picker 组件中只有一个 change 监听事件。看下代码~
picker.vue
methods: {
slotValueChange () {
this.$emit('change', this, this.values)
},
...
}
从代码中可以看到 picker 的 change 事件传递的值是 this 和 this.values，所以在定义 change 监听事件方法的时候可以获取到到 picker 组件实例本身，通过实例可以使用 picker 实例中的所有方法。
onYearChange(picker, values) {
picker.setSlotValues(1, address[values[0]]);
},
在 picker 文档中也有说到这个：
change 事件
在 change 事件中，可以使用注册到 picker 实例上的一些方法：
- getSlotValue(index)：获取给定 slot 目前被选中的值
- setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须>* 存在于该 slot 的备选值数组中
- getSlotValues(index)：获取给定 slot 的备选值数组
- setSlotValues(index, values)：设定给定 slot 的备选值数组
- getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
- setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中
来看看 change 事件的触发时机，触发条件是组件 create 之后或者 picker-slot 组件的值有变化时。
在 created 时触发的很好理解，直接执行 slotValueChange 方法。而接收 picker-slot 组件的值发生变化用到了 src/mixins/emittier.js 这个文件中的方法。方法有两个，分别是向父级组件传输数据的 dispatch 方法和向子级组件广播数据的 broadcast 方法。这里由于是子组件往父组件发送消息所以是 dispatch 方法~
picker.vue
created () {
this.$on('slotValueChange', this.slotValueChange)
this.slotValueChange()
},
picker-slot.vue
watch: {
currentValue (val) {
this.doOnValueChange()
if (this.rotateEffect) {
this.planUpdateRotate()
}
this.$emit('input', val)
this.dispatch('picker', 'slotValueChange', this)
}
}
当某个 picker-slot 组件的当前值有所变化就会向 picker 派发消息，picker 收到消息后触发 change 事件。
dispatch 方法
dispatch (componentName, eventName, params) {
var parent = this.$parent
var name = parent.$options.componentName
while (parent && (!name || name !== componentName)) {
parent = parent.$parent
if (parent) {
name = parent.$options.componentName
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params))
}
},
picker-slot 组件的滑动效果实现
基本原理：
- 使用了
transform: translate3d(0, 0, 0) rotateX(0);来做选项列表的偏移。 - 为选中项添加了
.picker-selected这个 class 来实现选中项的效果。 - 通过单个选项的高度、选中值的索引、显示选项的数量、选项总数这些属性来计算 translate 偏移值。
- 如果支持 touch 则使用
touchstart、touchmove、touchend和touchcancel方法监听手势，否则使用mousedown、mousemove和mouseup方法监听鼠标行为。
下面是 picker-slot 的具体滚动逻辑：
- 导入了 draggable.js 文件，这个文件定义了一个拖动元素的方法
draggable(element, options)，其中 element 是 dom 元素，而 options 对象中有三个方法：start()、drag()和end()方法分别对应开始拖拽、拖拽中和结束拖拽。 - 在渲染完成后执行了 initEvent() 方法，改方法调用 draggable.js 中的方法。
mounted () {
this.ready = true
if (!this.divider) {
this.initEvents()
this.doOnValueChange()
}
if (this.rotateEffect) {
this.doOnValuesChange()
}
},
initEvents () {
var el = this.$refs.wrapper
var dragState = {}
var velocityTranslate, prevTranslate, pickerItems
draggable(el, { ... })
}
- 选取
this.$ref.wrapper这个元素（即包裹选项列表的 div 元素），使用 draggable 方法定义拖拽各阶段的行为。 - 在 start 方法中记录了开始拖拽时的状态 dragState，取消了正在进行的动画，并记录所有选项元素。
start: (event) => {
cancelAnimationFrame(this.animationFrameId)
this.animationFrameId = null
dragState = {
range: this.dragRange,
start: new Date(),
startLeft: event.pageX,
startTop: event.pageY,
startTranslateTop: translateUtil.getElementTranslate(el).top
}
pickerItems = el.querySelectorAll('.picker-item')
},
- 在 drag 方法中不断更新拖拽状态 dragState，通过计算元素的偏移量，通过偏移量 translate 改变 transform:translate() 的偏移位置实现元素列表随手指（鼠标）移动的效果，全局记录这个偏移量，最后如果有滚动效果需要更新滚动效果动画和样式。
drag: (event) => {
this.dragging = true
dragState.left = event.pageX
dragState.top = event.pageY
var deltaY = dragState.top - dragState.startTop
var translate = dragState.startTranslateTop + deltaY
// 移动整个元素
translateUtil.translateElement(el, null, translate)
velocityTranslate = translate - prevTranslate || translate
prevTranslate = translate
if (this.rotateEffect) {
this.updateRotate(prevTranslate, pickerItems)
}
},
- 在 end 方法中通过拖拽状态 dragState 计算拖拽的时间和拖拽的距离；当记录很小时计算下是否需要移动选项元素；当拖拽时间小于 300 毫秒，计算一个快速拖拽的位移；当 dom 加载完成后计算最后的 translate 偏移量，其中拖拽和快速拖拽的偏移量是不同的；最后，将改变 $el 元素的偏移量实现滚动效果。并且通过偏移量获取当前对应的选项值。如果有滚动效果，还需要进行滚动动画的更新。
end: (event) => {
this.dragging = false
var momentumRatio = 7
var currentTranslate = translateUtil.getElementTranslate(el).top
var duration = new Date() - dragState.start
let distance = Math.abs(dragState.startTranslateTop - currentTranslate)
var itemHeight = this.itemHeight
var visibleItemCount = this.visibleItemCount
let rect, offset
if (distance < 6) {
rect = this.$el.getBoundingClientRect()
offset = Math.floor((event.clientY - (rect.top + (visibleItemCount - 1) * itemHeight / 2)) / itemHeight) * itemHeight
if (offset > this.maxTranslateY) {
offset = this.maxTranslateY
}
velocityTranslate = 0
currentTranslate -= offset
}
var momentumTranslate
if (duration < 300) {
momentumTranslate = currentTranslate + velocityTranslate * momentumRatio
}
var dragRange = dragState.range
this.$nextTick(() => {
var translate
if (momentumTranslate) {
translate = Math.round(momentumTranslate / itemHeight) * itemHeight
} else {
translate = Math.round(currentTranslate / itemHeight) * itemHeight
}
// translate must in the range
translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0])
// translate element
translateUtil.translateElement(el, null, translate)
// get current value by translate
this.currentValue = this.translate2Value(translate)
if (this.rotateEffect) {
this.planUpdateRotate()
}
})
// clear dragState
dragState = {}
}
隐藏属性 —— 滚动效果
在 picker 中有一个 rotateEffect 属性在文档中没有提及，它的作用是让选择器有圆形滚动效果，如下：
<mt-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="3" rotate-effect></mt-picker>
滚动效果
这是使用的
transform:totateX(45deg) 让元素有一个角度来实现滚动效果。
最后
picker 的源码在此
关于 picker 组件的分析就到这里啦，如果对于 picker 还有任何疑问，可以在评论区留言，共同学习。
网友评论