mirror of
				https://github.com/YunaiV/ruoyi-vue-pro.git
				synced 2025-11-01 03:28:41 +08:00 
			
		
		
		
	
		
			
				
	
	
		
			161 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			161 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| export default {
 | |
| 	data() {
 | |
| 		return {
 | |
| 			isshow: false,
 | |
| 			viewWidth: 0,
 | |
| 			buttonWidth: 0,
 | |
| 			disabledView: false,
 | |
| 			x: 0,
 | |
| 			transition: false
 | |
| 		}
 | |
| 	},
 | |
| 	watch: {
 | |
| 		show(newVal) {
 | |
| 			if (this.autoClose) return
 | |
| 			if (newVal) {
 | |
| 				this.open()
 | |
| 			} else {
 | |
| 				this.close()
 | |
| 			}
 | |
| 		},
 | |
| 	},
 | |
| 	created() {
 | |
| 		if (this.swipeaction.children !== undefined) {
 | |
| 			this.swipeaction.children.push(this)
 | |
| 		}
 | |
| 	},
 | |
| 	beforeDestroy() {
 | |
| 		this.swipeaction.children.forEach((item, index) => {
 | |
| 			if (item === this) {
 | |
| 				this.swipeaction.children.splice(index, 1)
 | |
| 			}
 | |
| 		})
 | |
| 	},
 | |
| 	mounted() {
 | |
| 		this.isopen = false
 | |
| 		this.transition = true
 | |
| 		setTimeout(() => {
 | |
| 			this.getQuerySelect()
 | |
| 		}, 50)
 | |
| 
 | |
| 	},
 | |
| 	methods: {
 | |
| 		onClick(index, item) {
 | |
| 			this.$emit('click', {
 | |
| 				content: item,
 | |
| 				index
 | |
| 			})
 | |
| 		},
 | |
| 		touchstart(e) {
 | |
| 			let {
 | |
| 				pageX,
 | |
| 				pageY
 | |
| 			} = e.changedTouches[0]
 | |
| 			this.transition = false
 | |
| 			this.startX = pageX
 | |
| 			if (this.autoClose) {
 | |
| 				this.swipeaction.closeOther(this)
 | |
| 			}
 | |
| 		},
 | |
| 		touchmove(e) {
 | |
| 			let {
 | |
| 				pageX,
 | |
| 			} = e.changedTouches[0]
 | |
| 			this.slide = this.getSlide(pageX)
 | |
| 			if (this.slide === 0) {
 | |
| 				this.disabledView = false
 | |
| 			}
 | |
| 
 | |
| 		},
 | |
| 		touchend(e) {
 | |
| 			this.stop = false
 | |
| 			this.transition = true
 | |
| 			if (this.isopen) {
 | |
| 				if (this.moveX === -this.buttonWidth) {
 | |
| 					this.close()
 | |
| 					return
 | |
| 				}
 | |
| 				this.move()
 | |
| 			} else {
 | |
| 				if (this.moveX === 0) {
 | |
| 					this.close()
 | |
| 					return
 | |
| 				}
 | |
| 				this.move()
 | |
| 			}
 | |
| 		},
 | |
| 		open() {
 | |
| 			this.x = this.moveX
 | |
| 			this.$nextTick(() => {
 | |
| 				this.x = -this.buttonWidth
 | |
| 				this.moveX = this.x
 | |
| 				
 | |
| 				if(!this.isopen){
 | |
| 					this.isopen = true
 | |
| 					this.$emit('change', true)
 | |
| 				}
 | |
| 			})
 | |
| 		},
 | |
| 		close() {
 | |
| 			this.x = this.moveX
 | |
| 			this.$nextTick(() => {
 | |
| 				this.x = 0
 | |
| 				this.moveX = this.x
 | |
| 				if(this.isopen){
 | |
| 					this.isopen = false
 | |
| 					this.$emit('change', false)
 | |
| 				}
 | |
| 			})
 | |
| 		},
 | |
| 		move() {
 | |
| 			if (this.slide === 0) {
 | |
| 				this.open()
 | |
| 			} else {
 | |
| 				this.close()
 | |
| 			}
 | |
| 		},
 | |
| 		onChange(e) {
 | |
| 			let x = e.detail.x
 | |
| 			this.moveX = x
 | |
| 			if (x >= this.buttonWidth) {
 | |
| 				this.disabledView = true
 | |
| 				this.$nextTick(() => {
 | |
| 					this.x = this.buttonWidth
 | |
| 				})
 | |
| 			}
 | |
| 		},
 | |
| 		getSlide(x) {
 | |
| 			if (x >= this.startX) {
 | |
| 				this.startX = x
 | |
| 				return 1
 | |
| 			} else {
 | |
| 				this.startX = x
 | |
| 				return 0
 | |
| 			}
 | |
| 
 | |
| 		},
 | |
| 		getQuerySelect() {
 | |
| 			const query = uni.createSelectorQuery().in(this);
 | |
| 			query.selectAll('.viewWidth-hook').boundingClientRect(data => {
 | |
| 
 | |
| 				this.viewWidth = data[0].width
 | |
| 				this.buttonWidth = data[1].width
 | |
| 				this.transition = false
 | |
| 				this.$nextTick(() => {
 | |
| 					this.transition = true
 | |
| 				})
 | |
| 
 | |
| 				if (!this.buttonWidth) {
 | |
| 					this.disabledView = true
 | |
| 				}
 | |
| 
 | |
| 				if (this.autoClose) return
 | |
| 				if (this.show) {
 | |
| 					this.open()
 | |
| 				}
 | |
| 			}).exec();
 | |
| 
 | |
| 		}
 | |
| 	}
 | |
| }
 | 
