index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. const defaults = {
  4. prefixCls: 'wux-select',
  5. value: '',
  6. options: [],
  7. multiple: false,
  8. max: -1,
  9. toolbar: {
  10. title: '请选择',
  11. cancelText: '取消',
  12. confirmText: '确定',
  13. },
  14. onChange() {},
  15. onConfirm() {},
  16. onCancel() {},
  17. }
  18. const getSelectIndex = ({ value = '', options = [], multiple = false }) => {
  19. const origins = options.map((n) => n.value || n)
  20. if (!multiple) {
  21. return origins.indexOf(value)
  22. }
  23. return (value || []).map((n) => origins.indexOf(n))
  24. }
  25. baseComponent({
  26. useFunc: true,
  27. data: defaults,
  28. computed: {
  29. classes() {
  30. const { prefixCls } = this.data
  31. const wrap = classNames(prefixCls)
  32. const toolbar = `${prefixCls}__toolbar`
  33. const inner = `${prefixCls}__inner`
  34. const cancel = classNames(`${prefixCls}__button`, {
  35. [`${prefixCls}__button--cancel`]: true
  36. })
  37. const confirm = classNames(`${prefixCls}__button`, {
  38. [`${prefixCls}__button--confirm`]: true
  39. })
  40. const hover = `${prefixCls}__button--hover`
  41. const title = `${prefixCls}__title`
  42. const scrollView = `${prefixCls}__scroll-view`
  43. return {
  44. wrap,
  45. toolbar,
  46. inner,
  47. cancel,
  48. confirm,
  49. hover,
  50. title,
  51. scrollView,
  52. }
  53. },
  54. },
  55. methods: {
  56. /**
  57. * 打开
  58. */
  59. open(opts = {}) {
  60. const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts, {
  61. max: parseInt(opts.max),
  62. }))
  63. const index = getSelectIndex(options)
  64. // scroll into view
  65. let activeIndex = Array.isArray(index) ? index[index.length - 1] : index
  66. if (activeIndex === -1 || activeIndex === undefined) {
  67. activeIndex = 0
  68. }
  69. activeIndex = `select-${activeIndex}`
  70. this.$$setData({ in: true, ...options, index, activeIndex })
  71. },
  72. /**
  73. * 关闭
  74. */
  75. close(callback) {
  76. this.$$setData({ in: false })
  77. if (typeof callback === 'function') {
  78. const { value, index, options } = this.data
  79. callback.call(this, value, index, options)
  80. }
  81. },
  82. /**
  83. * 点击确定按钮时的回调函数
  84. */
  85. onConfirm() {
  86. this.close(this.fns.onConfirm)
  87. },
  88. /**
  89. * 点击取消按钮时的回调函数
  90. */
  91. onCancel(e) {
  92. this.close(this.fns.onCancel)
  93. },
  94. /**
  95. * checkbox change 事件触发的回调函数
  96. */
  97. onCheckboxChange(e) {
  98. const oldValue = this.data.value
  99. const { value: newValue, checked } = e.detail
  100. const value = checked ? [...oldValue, newValue] : oldValue.filter((n) => n !== newValue)
  101. const index = getSelectIndex({ ...this.data, value })
  102. this.onChange(value, index)
  103. },
  104. /**
  105. * radio change 事件触发的回调函数
  106. */
  107. onRadioChange(e) {
  108. const { value, index } = e.detail
  109. this.onChange(value, index)
  110. },
  111. /**
  112. * 选择完成后的回调函数
  113. */
  114. onChange(value, index) {
  115. const { options, max, multiple } = this.data
  116. // 限制最多选择几项
  117. if (multiple && max >= 1 && max < value.length) return
  118. this.$$setData({ value, index })
  119. if (typeof this.fns.onChange === 'function') {
  120. this.fns.onChange.call(this, value, index, options)
  121. }
  122. },
  123. },
  124. })