index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var component_1 = require("../common/component");
  4. var ITEM_HEIGHT = 44;
  5. component_1.VantComponent({
  6. classes: [
  7. 'main-item-class',
  8. 'content-item-class',
  9. 'main-active-class',
  10. 'content-active-class',
  11. 'main-disabled-class',
  12. 'content-disabled-class'
  13. ],
  14. props: {
  15. items: Array,
  16. mainActiveIndex: {
  17. type: Number,
  18. value: 0
  19. },
  20. activeId: {
  21. type: [Number, String, Array]
  22. },
  23. maxHeight: {
  24. type: Number,
  25. value: 300
  26. }
  27. },
  28. data: {
  29. subItems: [],
  30. mainHeight: 0,
  31. itemHeight: 0
  32. },
  33. watch: {
  34. items: function () {
  35. var _this = this;
  36. this.updateSubItems().then(function () {
  37. _this.updateMainHeight();
  38. });
  39. },
  40. maxHeight: function () {
  41. this.updateItemHeight(this.data.subItems);
  42. this.updateMainHeight();
  43. },
  44. mainActiveIndex: 'updateSubItems'
  45. },
  46. methods: {
  47. // 当一个子项被选择时
  48. onSelectItem: function (event) {
  49. var item = event.currentTarget.dataset.item;
  50. if (!item.disabled) {
  51. this.$emit('click-item', item);
  52. }
  53. },
  54. // 当一个导航被点击时
  55. onClickNav: function (event) {
  56. var index = event.currentTarget.dataset.index;
  57. var item = this.data.items[index];
  58. if (!item.disabled) {
  59. this.$emit('click-nav', { index: index });
  60. }
  61. },
  62. // 更新子项列表
  63. updateSubItems: function () {
  64. var _a = this.data, items = _a.items, mainActiveIndex = _a.mainActiveIndex;
  65. var _b = (items[mainActiveIndex] || {}).children, children = _b === void 0 ? [] : _b;
  66. this.updateItemHeight(children);
  67. return this.set({ subItems: children });
  68. },
  69. // 更新组件整体高度,根据最大高度和当前组件需要展示的高度来决定
  70. updateMainHeight: function () {
  71. var _a = this.data, _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.subItems, subItems = _c === void 0 ? [] : _c;
  72. var maxHeight = Math.max(items.length * ITEM_HEIGHT, subItems.length * ITEM_HEIGHT);
  73. this.set({ mainHeight: Math.min(maxHeight, this.data.maxHeight) });
  74. },
  75. // 更新子项列表高度,根据可展示的最大高度和当前子项列表的高度决定
  76. updateItemHeight: function (subItems) {
  77. var itemHeight = Math.min(subItems.length * ITEM_HEIGHT, this.data.maxHeight);
  78. return this.set({ itemHeight: itemHeight });
  79. }
  80. }
  81. });