MeiMeiZhuan/components/uni-swipe-action-item/mpother.js

// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
export default {
	data() {
		return {
			uniShow: false,
			left: 0
		}
	},
	computed: {
		moveLeft() {
			return `translateX(${this.left}px)`
		}
	},
	watch: {
		show(newVal) {
			if (!this.position || JSON.stringify(this.position) === '{}') return;
			if (this.autoClose) return
			if (newVal) {
				this.$emit('change', true)
				this.open()
			} else {
				this.$emit('change', false)
				this.close()
			}
		}
	},
	mounted() {
		this.position = {}
		if (this.swipeaction.children !== undefined) {
			this.swipeaction.children.push(this)
		}
		setTimeout(() => {
			this.getSelectorQuery()
		}, 100)
	},
	beforeDestoy() {
		this.swipeaction.children.forEach((item, index) => {
			if (item === this) {
				this.swipeaction.children.splice(index, 1)
			}
		})
	},
	methods: {
		onClick(index, item) {
			this.$emit('click', {
				content: item,
				index
			})
			this.close()
		},
		touchstart(e) {
			const {
				pageX
			} = e.touches[0]
			if (this.disabled) return
			const left = this.position.content.left
			if (this.autoClose) {
				this.swipeaction.closeOther(this)
			}
			this.width = pageX - left
			if (this.isopen) return
			if (this.uniShow) {
				this.uniShow = false
				this.isopen = true
				this.openleft = this.left + this.position.button.width
			}
		},
		touchmove(e, index) {
			if (this.disabled) return
			const {
				pageX
			} = e.touches[0]
			this.setPosition(pageX)
		},
		touchend() {
			if (this.disabled) return
			if (this.isopen) {
				this.move(this.openleft, 0)
				return
			}
			this.move(this.left, -40)
		},
		setPosition(x, y) {
			if (!this.position.button.width) {
				return
			}
			// this.left = x - this.width
			this.setValue(x - this.width)
		},
		setValue(value) {
			// 设置最大最小值
			this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
			this.position.content.left = this.left
			if (this.isopen) {
				this.openleft = this.left + this.position.button.width
			}
		},
		move(left, value) {
			if (left >= value) {
				this.$emit('change', false)
				this.close()
			} else {
				this.$emit('change', true)
				this.open()
			}
		},
		open() {
			this.uniShow = true
			this.left = -this.position.button.width
			this.setValue(-this.position.button.width)
		},
		close() {
			this.uniShow = true
			this.setValue(0)
			setTimeout(() => {
				this.uniShow = false
				this.isopen = false
			}, 300)
		},
		getSelectorQuery() {
			// #ifndef APP-NVUE
			const views = uni.createSelectorQuery()
				.in(this)
			views
				.selectAll('.selector-query-hock')
				.boundingClientRect(data => {
					this.position.content = data[1]
					this.position.button = data[0]
					if (this.autoClose) return
					if (this.show) {
						this.open()
					} else {
						this.close()
					}
				})
				.exec()
			// #endif
			// #ifdef APP-NVUE
			dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
				if (this.position.content) return
				this.position.content = data.size
			})
			dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
				if (this.position.button) return
				this.position.button = data.size
				if (this.autoClose) return
				if (this.show) {
					this.open()
				} else {
					this.close()
				}
			})
			// #endif
		}
	}
}