You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
3.2 KiB
158 lines
3.2 KiB
// #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 |
|
} |
|
} |
|
}
|
|
|