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.4 KiB

3 years ago
  1. // #ifdef APP-NVUE
  2. const dom = weex.requireModule('dom');
  3. // #endif
  4. export default {
  5. data() {
  6. return {
  7. uniShow: false,
  8. left: 0
  9. }
  10. },
  11. computed: {
  12. moveLeft() {
  13. return `translateX(${this.left}px)`
  14. }
  15. },
  16. watch: {
  17. show(newVal) {
  18. if (!this.position || JSON.stringify(this.position) === '{}') return;
  19. if (this.autoClose) return
  20. if (newVal) {
  21. this.$emit('change', true)
  22. this.open()
  23. } else {
  24. this.$emit('change', false)
  25. this.close()
  26. }
  27. }
  28. },
  29. mounted() {
  30. this.position = {}
  31. if (this.swipeaction.children !== undefined) {
  32. this.swipeaction.children.push(this)
  33. }
  34. setTimeout(() => {
  35. this.getSelectorQuery()
  36. }, 100)
  37. },
  38. beforeDestoy() {
  39. this.swipeaction.children.forEach((item, index) => {
  40. if (item === this) {
  41. this.swipeaction.children.splice(index, 1)
  42. }
  43. })
  44. },
  45. methods: {
  46. onClick(index, item) {
  47. this.$emit('click', {
  48. content: item,
  49. index
  50. })
  51. this.close()
  52. },
  53. touchstart(e) {
  54. const {
  55. pageX
  56. } = e.touches[0]
  57. if (this.disabled) return
  58. const left = this.position.content.left
  59. if (this.autoClose) {
  60. this.swipeaction.closeOther(this)
  61. }
  62. this.width = pageX - left
  63. if (this.isopen) return
  64. if (this.uniShow) {
  65. this.uniShow = false
  66. this.isopen = true
  67. this.openleft = this.left + this.position.button.width
  68. }
  69. },
  70. touchmove(e, index) {
  71. if (this.disabled) return
  72. const {
  73. pageX
  74. } = e.touches[0]
  75. this.setPosition(pageX)
  76. },
  77. touchend() {
  78. if (this.disabled) return
  79. if (this.isopen) {
  80. this.move(this.openleft, 0)
  81. return
  82. }
  83. this.move(this.left, -40)
  84. },
  85. setPosition(x, y) {
  86. if (!this.position.button.width) {
  87. return
  88. }
  89. // this.left = x - this.width
  90. this.setValue(x - this.width)
  91. },
  92. setValue(value) {
  93. // 设置最大最小值
  94. this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
  95. this.position.content.left = this.left
  96. if (this.isopen) {
  97. this.openleft = this.left + this.position.button.width
  98. }
  99. },
  100. move(left, value) {
  101. if (left >= value) {
  102. this.$emit('change', false)
  103. this.close()
  104. } else {
  105. this.$emit('change', true)
  106. this.open()
  107. }
  108. },
  109. open() {
  110. this.uniShow = true
  111. this.left = -this.position.button.width
  112. this.setValue(-this.position.button.width)
  113. },
  114. close() {
  115. this.uniShow = true
  116. this.setValue(0)
  117. setTimeout(() => {
  118. this.uniShow = false
  119. this.isopen = false
  120. }, 300)
  121. },
  122. getSelectorQuery() {
  123. // #ifndef APP-NVUE
  124. const views = uni.createSelectorQuery()
  125. .in(this)
  126. views
  127. .selectAll('.selector-query-hock')
  128. .boundingClientRect(data => {
  129. this.position.content = data[1]
  130. this.position.button = data[0]
  131. if (this.autoClose) return
  132. if (this.show) {
  133. this.open()
  134. } else {
  135. this.close()
  136. }
  137. })
  138. .exec()
  139. // #endif
  140. // #ifdef APP-NVUE
  141. dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  142. if (this.position.content) return
  143. this.position.content = data.size
  144. })
  145. dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
  146. if (this.position.button) return
  147. this.position.button = data.size
  148. if (this.autoClose) return
  149. if (this.show) {
  150. this.open()
  151. } else {
  152. this.close()
  153. }
  154. })
  155. // #endif
  156. }
  157. }
  158. }