index.js 2.0KB

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