index.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import { VantComponent } from '../common/component';
  2. import { addUnit } from '../common/utils';
  3. VantComponent({
  4. classes: [
  5. 'main-item-class',
  6. 'content-item-class',
  7. 'main-active-class',
  8. 'content-active-class',
  9. 'main-disabled-class',
  10. 'content-disabled-class'
  11. ],
  12. props: {
  13. items: {
  14. type: Array,
  15. observer: 'updateSubItems'
  16. },
  17. activeId: null,
  18. mainActiveIndex: {
  19. type: Number,
  20. value: 0,
  21. observer: 'updateSubItems'
  22. },
  23. height: {
  24. type: [Number, String],
  25. value: 300,
  26. observer: 'updateHeight'
  27. },
  28. max: {
  29. type: Number,
  30. value: Infinity
  31. }
  32. },
  33. data: {
  34. subItems: []
  35. },
  36. created() {
  37. this.updateHeight();
  38. },
  39. methods: {
  40. // 当一个子项被选择时
  41. onSelectItem(event) {
  42. const { item } = event.currentTarget.dataset;
  43. const isArray = Array.isArray(this.data.activeId);
  44. // 判断有没有超出右侧选择的最大数
  45. const isOverMax = isArray && this.data.activeId.length >= this.data.max;
  46. // 判断该项有没有被选中, 如果有被选中,则忽视是否超出的条件
  47. const isSelected = isArray
  48. ? this.data.activeId.indexOf(item.id) > -1
  49. : this.data.activeId === item.id;
  50. if (!item.disabled && (!isOverMax || isSelected)) {
  51. this.$emit('click-item', item);
  52. }
  53. },
  54. // 当一个导航被点击时
  55. onClickNav(event) {
  56. const index = event.detail;
  57. const item = this.data.items[index];
  58. if (!item.disabled) {
  59. this.$emit('click-nav', { index });
  60. }
  61. },
  62. // 更新子项列表
  63. updateSubItems() {
  64. const { items, mainActiveIndex } = this.data;
  65. const { children = [] } = items[mainActiveIndex] || {};
  66. return this.set({ subItems: children });
  67. },
  68. updateHeight() {
  69. this.setData({
  70. innerHeight: addUnit(this.data.height)
  71. });
  72. }
  73. }
  74. });