vue-pro/yudao-vue-ui/components/uni-swipe-action-item/mpalipay.js

161 lines
2.7 KiB
JavaScript
Raw Normal View History

2021-11-24 23:33:06 +08:00
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();
}
}
}