index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. import { $wuxBackdrop } from '../index'
  4. const defaults = {
  5. prefixCls: 'wux-actionsheet',
  6. classNames: 'wux-animate--slideInUp',
  7. theme: 'ios',
  8. className: '',
  9. titleText: '',
  10. buttons: [],
  11. buttonClicked() {},
  12. cancelText: '取消',
  13. cancel() {},
  14. // destructiveText: '删除',
  15. // destructiveButtonClicked() {},
  16. }
  17. baseComponent({
  18. useFunc: true,
  19. data: defaults,
  20. computed: {
  21. classes() {
  22. const { prefixCls, theme, buttons } = this.data
  23. const content = classNames(`${prefixCls}__content`, {
  24. [`${prefixCls}__content--theme-${theme}`]: theme,
  25. })
  26. const options = classNames(`${prefixCls}__group`, {
  27. [`${prefixCls}__group--options`]: true,
  28. })
  29. const title = `${prefixCls}__title`
  30. const destructive = classNames(`${prefixCls}__button`, {
  31. [`${prefixCls}__button--destructive`]: true,
  32. })
  33. const button = buttons.map((button) => {
  34. const wrap = classNames(`${prefixCls}__button`, {
  35. [`${prefixCls}__button--option`]: true,
  36. [`${prefixCls}__button--disabled`]: button.disabled,
  37. [`${button.className}`]: button.className,
  38. })
  39. const hover = button.hoverClass && button.hoverClass !== 'default' ? button.hoverClass : `${prefixCls}__button--hover`
  40. return {
  41. wrap,
  42. hover,
  43. }
  44. })
  45. const icon = `${prefixCls}__icon`
  46. const text = `${prefixCls}__text`
  47. const group = classNames(`${prefixCls}__group`, {
  48. [`${prefixCls}__group--cancel`]: true,
  49. })
  50. const cancel = classNames(`${prefixCls}__button`, {
  51. [`${prefixCls}__button--cancel`]: true,
  52. })
  53. const hover = `${prefixCls}__button--hover`
  54. return {
  55. content,
  56. options,
  57. title,
  58. button,
  59. icon,
  60. text,
  61. destructive,
  62. group,
  63. cancel,
  64. hover,
  65. }
  66. },
  67. },
  68. methods: {
  69. /**
  70. * 显示
  71. */
  72. showSheet(opts = {}) {
  73. const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
  74. this.removed = false
  75. this.$$setData({ in: true, ...options })
  76. this.$wuxBackdrop.retain()
  77. return this.cancel.bind(this)
  78. },
  79. /**
  80. * 隐藏
  81. */
  82. removeSheet(callback) {
  83. if (this.removed) return false
  84. this.removed = true
  85. this.$$setData({ in: false })
  86. this.$wuxBackdrop.release()
  87. if (typeof callback === 'function') {
  88. callback(this.data.buttons)
  89. }
  90. },
  91. /**
  92. * 按钮点击事件
  93. */
  94. buttonClicked(e) {
  95. const { index } = e.currentTarget.dataset
  96. if (this.fns.buttonClicked(index, this.data.buttons[index]) === true) {
  97. this.removeSheet()
  98. }
  99. },
  100. /**
  101. * 删除按钮点击事件
  102. */
  103. destructiveButtonClicked() {
  104. if (this.fns.destructiveButtonClicked() === true) {
  105. this.removeSheet()
  106. }
  107. },
  108. /**
  109. * 取消按钮点击事件
  110. */
  111. cancel() {
  112. this.removeSheet(this.fns.cancel)
  113. },
  114. bindgetuserinfo(e) {
  115. this.triggerEvent('getuserinfo', {...e.detail, ...e.currentTarget.dataset })
  116. },
  117. bindcontact(e) {
  118. this.triggerEvent('contact', {...e.detail, ...e.currentTarget.dataset })
  119. },
  120. bindgetphonenumber(e) {
  121. this.triggerEvent('getphonenumber', {...e.detail, ...e.currentTarget.dataset })
  122. },
  123. bindopensetting(e) {
  124. this.triggerEvent('opensetting', {...e.detail, ...e.currentTarget.dataset })
  125. },
  126. onError(e) {
  127. this.triggerEvent('error', {...e.detail, ...e.currentTarget.dataset })
  128. },
  129. },
  130. created() {
  131. this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
  132. },
  133. })