index.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. import { getTouchPoints, getPointsNumber, getPointsDistance } from '../helpers/gestures'
  4. const defaults = {
  5. prefixCls: 'wux-gallery',
  6. classNames: 'wux-animate--slideInRight',
  7. indicatorDots: false,
  8. indicatorColor: 'rgba(0, 0, 0, .3)',
  9. indicatorActiveColor: '#000000',
  10. autoplay: false,
  11. interval: 5000,
  12. duration: 500,
  13. circular: false,
  14. vertical: false,
  15. showDelete: true,
  16. allowScale: true,
  17. current: 0,
  18. urls: [],
  19. ['delete']() {},
  20. cancel() {},
  21. onChange() {},
  22. onTap() { return true },
  23. }
  24. const MIN_RATIO = 1
  25. const MAX_RATIO = 1.2
  26. const defaultTouchOptions = {
  27. scale: 1,
  28. offset: [.5, 3],
  29. }
  30. const getImages = (urls = []) => {
  31. return urls.map((n) => {
  32. if (typeof n !== 'object') {
  33. return {
  34. image: n,
  35. remark: '',
  36. touch: { ...defaultTouchOptions },
  37. }
  38. }
  39. return { ...n, touch: { ...defaultTouchOptions } }
  40. })
  41. }
  42. baseComponent({
  43. useFunc: true,
  44. data: defaults,
  45. computed: {
  46. classes() {
  47. const { prefixCls } = this.data
  48. const swiper = `${prefixCls}__swiper`
  49. const item = `${prefixCls}__item`
  50. const img = `${prefixCls}__img`
  51. const remark = `${prefixCls}__remark`
  52. const opr = `${prefixCls}__opr`
  53. const del = `${prefixCls}__del`
  54. const icon = `${prefixCls}__icon`
  55. return {
  56. swiper,
  57. item,
  58. img,
  59. remark,
  60. opr,
  61. del,
  62. icon,
  63. }
  64. },
  65. },
  66. methods: {
  67. /**
  68. * 隐藏
  69. */
  70. hide() {
  71. this.$$setData({ in: false })
  72. if (typeof this.fns.cancel === 'function') {
  73. this.fns.cancel()
  74. }
  75. },
  76. /**
  77. * 显示
  78. */
  79. show(opts = {}) {
  80. const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts, {
  81. images: getImages(opts.urls),
  82. }))
  83. this.$$setData({ in: true, ...options })
  84. },
  85. /**
  86. * 图片点击事件
  87. */
  88. onTap(e) {
  89. if (this.allowItemClick) {
  90. const { index } = e.currentTarget.dataset
  91. if (this.fns.onTap(index, this.data.urls) === true) {
  92. this.hide()
  93. }
  94. }
  95. },
  96. /**
  97. * 手指触摸动作开始
  98. */
  99. onTouchStart(e) {
  100. this.allowItemClick = true
  101. if (!this.data.allowScale || getPointsNumber(e) === 1 || this.touching) {
  102. return false
  103. }
  104. const p1 = getTouchPoints(e)
  105. const p2 = getTouchPoints(e, 1)
  106. const distance = getPointsDistance(p1, p2)
  107. this.touching = false
  108. this.prevDistance = distance
  109. this.$$setData({
  110. transition: 'none',
  111. })
  112. },
  113. /**
  114. * 手指触摸后移动
  115. */
  116. onTouchMove(e) {
  117. if (!this.data.allowScale || getPointsNumber(e) === 1 || this.isRendered) {
  118. return false
  119. }
  120. const p1 = getTouchPoints(e)
  121. const p2 = getTouchPoints(e, 1)
  122. const distance = getPointsDistance(p1, p2)
  123. const { touch, index } = e.currentTarget.dataset
  124. const distanceDiff = distance - this.prevDistance
  125. let scale = touch.scale + 0.005 * distanceDiff
  126. if (index !== this.data.current) {
  127. return false
  128. }
  129. if (scale <= touch.offset[0] * MIN_RATIO) {
  130. scale = touch.offset[0] * MIN_RATIO
  131. } else if (scale >= touch.offset[1] * MAX_RATIO) {
  132. scale = touch.offset[1] * MAX_RATIO
  133. }
  134. const params = {
  135. [`images[${index}].touch.scale`]: scale,
  136. }
  137. if (!this.touching) {
  138. this.touching = true
  139. }
  140. this.prevDistance = distance
  141. this.allowItemClick = false
  142. this.isRendered = true
  143. this.$$setData(params).then(() => (this.isRendered = false))
  144. },
  145. /**
  146. * 手指触摸动作结束
  147. */
  148. onTouchEnd(e) {
  149. if (!this.data.allowScale || !this.touching) {
  150. return false
  151. }
  152. const { touch, index } = e.currentTarget.dataset
  153. let scale = touch.scale
  154. if (scale <= 1) {
  155. scale = 1
  156. } else if (scale >= touch.offset[1] * MAX_RATIO) {
  157. scale = touch.offset[1]
  158. }
  159. const params = {
  160. [`images[${index}].touch.scale`]: scale,
  161. transition: 'transform .3s',
  162. }
  163. this.touching = false
  164. this.$$setData(params).then(() => {
  165. // Allow click
  166. setTimeout(() => (this.allowItemClick = true), 400)
  167. })
  168. },
  169. /**
  170. * 点击删除按钮时会触发 delete 事件
  171. */
  172. onDelete(e) {
  173. if (typeof this.fns['delete'] === 'function') {
  174. if (this.fns['delete'](this.data.current, this.data.urls) === true) {
  175. this.hide()
  176. }
  177. }
  178. },
  179. /**
  180. * current 改变时会触发 change 事件
  181. */
  182. onChange(e) {
  183. this.$$setData({ current: e.detail.current })
  184. if (typeof this.fns.onChange === 'function') {
  185. this.fns.onChange.call(this, e)
  186. }
  187. },
  188. /**
  189. * 滚动到指定图片
  190. * @param {Number} current 滑块的索引值
  191. * @param {Number} duration 延迟时长触发事件
  192. */
  193. slideTo(current = 0, duration = 0) {
  194. const { urls, circular } = this.data
  195. const max = urls.length - 1
  196. if (current < 0) {
  197. current = circular ? max : 0
  198. } else if (current > max) {
  199. current = circular ? 0 : max
  200. }
  201. if (duration > 0) {
  202. return this.$$requestAnimationFrame(() => this.$$setData({ current }), duration)
  203. }
  204. return this.$$setData({ current })
  205. },
  206. /**
  207. * 滚动到下一张图片
  208. * @param {Number} duration 延迟时长触发事件
  209. */
  210. slideNext(duration) {
  211. return this.slideTo(this.data.current + 1, duration)
  212. },
  213. /**
  214. * 滚动到上一张图片
  215. * @param {Number} duration 延迟时长触发事件
  216. */
  217. slidePrev(duration) {
  218. return this.slideTo(this.data.current - 1, duration)
  219. },
  220. },
  221. })