index.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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: ['prefixCls, theme, current, disabled', function(prefixCls, theme, current, disabled) {
  34. const wrap = classNames(prefixCls, {
  35. [`${prefixCls}--${theme}`]: theme,
  36. [`${prefixCls}--current`]: current,
  37. [`${prefixCls}--disabled`]: disabled,
  38. })
  39. const icon = `${prefixCls}__icon`
  40. const title = `${prefixCls}__title`
  41. return {
  42. wrap,
  43. icon,
  44. title,
  45. }
  46. }],
  47. },
  48. methods: {
  49. changeCurrent(current, index, theme, length) {
  50. const width = 100 / length + '%'
  51. this.setData({
  52. width,
  53. current,
  54. theme,
  55. index,
  56. })
  57. },
  58. onTap() {
  59. const { index, disabled } = this.data
  60. const parent = this.getRelationNodes('../tabbar/index')[0]
  61. if (disabled || !parent) return
  62. this.triggerEvent('click', { index })
  63. parent.setActiveKey(index)
  64. },
  65. },
  66. })