index.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. baseComponent({
  4. relations: {
  5. '../tabbar/index': {
  6. type: 'parent',
  7. },
  8. },
  9. properties: {
  10. prefixCls: {
  11. type: String,
  12. value: 'wux-tabbar-item',
  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. width: '100%',
  29. current: false,
  30. index: '0',
  31. },
  32. computed: {
  33. classes() {
  34. const { prefixCls, theme, current, disabled } = this.data
  35. const wrap = classNames(prefixCls, {
  36. [`${prefixCls}--${theme}`]: theme,
  37. [`${prefixCls}--current`]: current,
  38. [`${prefixCls}--disabled`]: disabled,
  39. })
  40. const icon = `${prefixCls}__icon`
  41. const title = `${prefixCls}__title`
  42. return {
  43. wrap,
  44. icon,
  45. title,
  46. }
  47. },
  48. },
  49. methods: {
  50. changeCurrent(current, index, theme, length) {
  51. const width = 100 / length + '%'
  52. this.setData({
  53. width,
  54. current,
  55. theme,
  56. index,
  57. })
  58. },
  59. onTap() {
  60. const { index, disabled } = this.data
  61. const parent = this.getRelationNodes('../tabbar/index')[0]
  62. if (disabled || !parent) {
  63. return false
  64. }
  65. this.triggerEvent('click', { index })
  66. parent.setActiveKey(index)
  67. },
  68. },
  69. })