index.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. baseComponent({
  4. relations: {
  5. '../tabs/index': {
  6. type: 'parent',
  7. },
  8. },
  9. properties: {
  10. prefixCls: {
  11. type: String,
  12. value: 'wux-tabs__tab',
  13. },
  14. key: {
  15. type: String,
  16. value: '',
  17. },
  18. title: {
  19. type: String,
  20. value: '',
  21. },
  22. disabled: {
  23. type: Boolean,
  24. value: false,
  25. },
  26. },
  27. data: {
  28. current: false,
  29. scroll: false,
  30. },
  31. computed: {
  32. classes() {
  33. const { prefixCls, direction, scroll, theme, current, disabled } = this.data
  34. const wrap = classNames(prefixCls, {
  35. [`${prefixCls}--${direction}`]: direction,
  36. [`${prefixCls}--${theme}`]: theme,
  37. [`${prefixCls}--scroll`]: scroll,
  38. [`${prefixCls}--current`]: current,
  39. [`${prefixCls}--disabled`]: disabled,
  40. })
  41. const title = `${prefixCls}-title`
  42. const bar = `${prefixCls}-bar`
  43. return {
  44. wrap,
  45. title,
  46. bar,
  47. }
  48. },
  49. },
  50. methods: {
  51. changeCurrent({ current, scroll, theme, direction }) {
  52. this.setData({
  53. current,
  54. scroll,
  55. theme,
  56. direction,
  57. })
  58. },
  59. onTap() {
  60. const { key, disabled } = this.data
  61. const parent = this.getRelationNodes('../tabs/index')[0]
  62. if (disabled || !parent) return
  63. this.triggerEvent('click', { key })
  64. parent.setActiveKey(key)
  65. },
  66. },
  67. })