index.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. baseComponent({
  4. properties: {
  5. prefixCls: {
  6. type: String,
  7. value: 'wux-segment',
  8. },
  9. theme: {
  10. type: String,
  11. value: 'balanced',
  12. },
  13. defaultCurrent: {
  14. type: Number,
  15. value: 0,
  16. },
  17. current: {
  18. type: Number,
  19. value: 0,
  20. observer(newVal) {
  21. if (this.data.controlled) {
  22. this.setData({
  23. activeKey: newVal,
  24. })
  25. }
  26. },
  27. },
  28. values: {
  29. type: Array,
  30. value: [],
  31. },
  32. disabled: {
  33. type: Boolean,
  34. value: false,
  35. },
  36. controlled: {
  37. type: Boolean,
  38. value: false,
  39. },
  40. },
  41. data: {
  42. activeKey: 0,
  43. },
  44. computed: {
  45. classes: ['prefixCls, theme, disabled', function(prefixCls, theme, disabled) {
  46. const wrap = classNames(prefixCls, {
  47. [`${prefixCls}--${theme}`]: theme,
  48. [`${prefixCls}--disabled`]: disabled,
  49. })
  50. const item = `${prefixCls}__item`
  51. return {
  52. wrap,
  53. item,
  54. }
  55. }],
  56. },
  57. methods: {
  58. onTap(e) {
  59. if (this.data.disabled) return
  60. this.setActiveKey(e.currentTarget.dataset.index)
  61. },
  62. emitEvent(key) {
  63. this.triggerEvent('change', {
  64. key,
  65. values: this.data.values,
  66. })
  67. },
  68. setActiveKey(activeKey) {
  69. if (this.data.activeKey !== activeKey) {
  70. if (!this.data.controlled) {
  71. this.setData({
  72. activeKey,
  73. })
  74. }
  75. }
  76. this.emitEvent(activeKey)
  77. },
  78. },
  79. attached() {
  80. const { defaultCurrent, current, controlled } = this.data
  81. const activeKey = controlled ? current : defaultCurrent
  82. if (this.data.activeKey !== activeKey) {
  83. this.setData({
  84. activeKey,
  85. })
  86. }
  87. },
  88. })