import { VantComponent } from '../common/component'; import { touch } from '../mixins/touch'; import { range } from '../common/utils'; const THRESHOLD = 0.3; let ARRAY = []; VantComponent({ props: { disabled: Boolean, leftWidth: { type: Number, value: 0, observer(leftWidth = 0) { if (this.offset > 0) { this.swipeMove(leftWidth); } }, }, rightWidth: { type: Number, value: 0, observer(rightWidth = 0) { if (this.offset < 0) { this.swipeMove(-rightWidth); } }, }, asyncClose: Boolean, name: { type: null, value: '', }, }, mixins: [touch], data: { catchMove: false, wrapperStyle: '', }, created() { this.offset = 0; ARRAY.push(this); }, destroyed() { ARRAY = ARRAY.filter((item) => item !== this); }, methods: { open(position) { const { leftWidth, rightWidth } = this.data; const offset = position === 'left' ? leftWidth : -rightWidth; this.swipeMove(offset); this.$emit('open', { position, name: this.data.name, }); }, close() { this.swipeMove(0); }, swipeMove(offset = 0) { this.offset = range(offset, -this.data.rightWidth, this.data.leftWidth); const transform = `translate3d(${this.offset}px, 0, 0)`; const transition = this.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)'; this.setData({ wrapperStyle: ` -webkit-transform: ${transform}; -webkit-transition: ${transition}; transform: ${transform}; transition: ${transition}; `, }); }, swipeLeaveTransition() { const { leftWidth, rightWidth } = this.data; const { offset } = this; if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) { this.open('right'); } else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) { this.open('left'); } else { this.swipeMove(0); } this.setData({ catchMove: false }); }, startDrag(event) { if (this.data.disabled) { return; } this.startOffset = this.offset; this.touchStart(event); }, noop() { }, onDrag(event) { if (this.data.disabled) { return; } this.touchMove(event); if (this.direction !== 'horizontal') { return; } this.dragging = true; ARRAY.filter((item) => item !== this && item.offset !== 0).forEach((item) => item.close()); this.setData({ catchMove: true }); this.swipeMove(this.startOffset + this.deltaX); }, endDrag() { if (this.data.disabled) { return; } this.dragging = false; this.swipeLeaveTransition(); }, onClick(event) { const { key: position = 'outside' } = event.currentTarget.dataset; this.$emit('click', position); if (!this.offset) { return; } if (this.data.asyncClose) { this.$emit('close', { position, instance: this, name: this.data.name, }); } else { this.swipeMove(0); } }, }, });