index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <uni-shadow-root class="vant-tree-select-index"><view class="van-tree-select" :style="'height: '+(mainHeight)+'px'">
  3. <scroll-view scroll-y class="van-tree-select__nav">
  4. <view v-for="(item,index) in (items)" :key="item.index" :class="'van-ellipsis main-item-class '+(utils.bem('tree-select__nitem', { active: mainActiveIndex === index, disabled: item.disabled }))+' '+(mainActiveIndex === index ? 'main-active-class' : '')+' '+(item.disabled ? 'main-disabled-class' : '')" :data-index="index" @click="onClickNav">
  5. {{ item.text }}
  6. </view>
  7. </scroll-view>
  8. <scroll-view scroll-y class="van-tree-select__content" :style="'height: '+(itemHeight)+'px'">
  9. <view v-for="(item,index) in (subItems)" :key="item.id" :class="'van-ellipsis van-hairline--bottom content-item-class '+(utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }))+' '+(activeId === item.id ? 'content-active-class' : '')+' '+(item.disabled ? 'content-disabled-class' : '')" :data-item="item" @click="onSelectItem">
  10. {{ item.text }}
  11. <van-icon v-if="activeId === item.id" name="checked" size="16px" class="van-tree-select__selected"></van-icon>
  12. </view>
  13. </scroll-view>
  14. </view></uni-shadow-root>
  15. </template>
  16. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  17. <script>
  18. import VanIcon from '../icon/index.vue'
  19. global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}
  20. global['__wxRoute'] = 'vant/tree-select/index'
  21. "use strict";
  22. Object.defineProperty(exports, "__esModule", { value: true });
  23. var component_1 = require('./../common/component.js');
  24. var ITEM_HEIGHT = 44;
  25. component_1.VantComponent({
  26. classes: ['main-item-class', 'content-item-class', 'main-active-class', 'content-active-class', 'main-disabled-class', 'content-disabled-class'],
  27. props: {
  28. items: Array,
  29. mainActiveIndex: {
  30. type: Number,
  31. value: 0
  32. },
  33. activeId: {
  34. type: [Number, String]
  35. },
  36. maxHeight: {
  37. type: Number,
  38. value: 300
  39. }
  40. },
  41. data: {
  42. subItems: [],
  43. mainHeight: 0,
  44. itemHeight: 0
  45. },
  46. watch: {
  47. items: function items() {
  48. var _this = this;
  49. this.updateSubItems().then(function () {
  50. _this.updateMainHeight();
  51. });
  52. },
  53. maxHeight: function maxHeight() {
  54. this.updateItemHeight(this.data.subItems);
  55. this.updateMainHeight();
  56. },
  57. mainActiveIndex: 'updateSubItems'
  58. },
  59. methods: {
  60. // 当一个子项被选择时
  61. onSelectItem: function onSelectItem(event) {
  62. var item = event.currentTarget.dataset.item;
  63. if (!item.disabled) {
  64. this.$emit('click-item', item);
  65. }
  66. },
  67. // 当一个导航被点击时
  68. onClickNav: function onClickNav(event) {
  69. var index = event.currentTarget.dataset.index;
  70. var item = this.data.items[index];
  71. if (!item.disabled) {
  72. this.$emit('click-nav', { index: index });
  73. }
  74. },
  75. // 更新子项列表
  76. updateSubItems: function updateSubItems() {
  77. var _a = this.data,
  78. items = _a.items,
  79. mainActiveIndex = _a.mainActiveIndex;
  80. var _b = (items[mainActiveIndex] || {}).children,
  81. children = _b === void 0 ? [] : _b;
  82. this.updateItemHeight(children);
  83. return this.set({ subItems: children });
  84. },
  85. // 更新组件整体高度,根据最大高度和当前组件需要展示的高度来决定
  86. updateMainHeight: function updateMainHeight() {
  87. var _a = this.data,
  88. _b = _a.items,
  89. items = _b === void 0 ? [] : _b,
  90. _c = _a.subItems,
  91. subItems = _c === void 0 ? [] : _c;
  92. var maxHeight = Math.max(items.length * ITEM_HEIGHT, subItems.length * ITEM_HEIGHT);
  93. this.set({ mainHeight: Math.min(maxHeight, this.data.maxHeight) });
  94. },
  95. // 更新子项列表高度,根据可展示的最大高度和当前子项列表的高度决定
  96. updateItemHeight: function updateItemHeight(subItems) {
  97. var itemHeight = Math.min(subItems.length * ITEM_HEIGHT, this.data.maxHeight);
  98. return this.set({ itemHeight: itemHeight });
  99. }
  100. }
  101. });
  102. //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbIk9iamVjdCIsInZhbHVlIiwiY29tcG9uZW50XzEiLCJyZXF1aXJlIiwiSVRFTV9IRUlHSFQiLCJjbGFzc2VzIiwicHJvcHMiLCJpdGVtcyIsIm1haW5BY3RpdmVJbmRleCIsInR5cGUiLCJhY3RpdmVJZCIsIm1heEhlaWdodCIsImRhdGEiLCJzdWJJdGVtcyIsIm1haW5IZWlnaHQiLCJpdGVtSGVpZ2h0Iiwid2F0Y2giLCJfdGhpcyIsIm1ldGhvZHMiLCJvblNlbGVjdEl0ZW0iLCJpdGVtIiwiZXZlbnQiLCJvbkNsaWNrTmF2IiwiaW5kZXgiLCJ1cGRhdGVTdWJJdGVtcyIsIl9hIiwiX2IiLCJjaGlsZHJlbiIsInVwZGF0ZU1haW5IZWlnaHQiLCJfYyIsIk1hdGgiLCJ1cGRhdGVJdGVtSGVpZ2h0Il0sIm1hcHBpbmdzIjoiOztBQUNBQSxPQUFBQSxjQUFBQSxDQUFBQSxPQUFBQSxFQUFBQSxZQUFBQSxFQUE2QyxFQUFFQyxPQUEvQ0QsSUFBNkMsRUFBN0NBO0FBQ0EsSUFBSUUsY0FBY0MsUUFBbEIsMEJBQWtCQSxDQUFsQjtBQUNBLElBQUlDLGNBQUosRUFBQTtBQUNBRixZQUFBQSxhQUFBQSxDQUEwQjtBQUN0QkcsYUFBUyxDQUFBLGlCQUFBLEVBQUEsb0JBQUEsRUFBQSxtQkFBQSxFQUFBLHNCQUFBLEVBQUEscUJBQUEsRUFEYSx3QkFDYixDQURhO0FBU3RCQyxXQUFPO0FBQ0hDLGVBREcsS0FBQTtBQUVIQyx5QkFBaUI7QUFDYkMsa0JBRGEsTUFBQTtBQUViUixtQkFBTztBQUZNLFNBRmQ7QUFNSFMsa0JBQVU7QUFDTkQsa0JBQU0sQ0FBQSxNQUFBLEVBQUEsTUFBQTtBQURBLFNBTlA7QUFTSEUsbUJBQVc7QUFDUEYsa0JBRE8sTUFBQTtBQUVQUixtQkFBTztBQUZBO0FBVFIsS0FUZTtBQXVCdEJXLFVBQU07QUFDRkMsa0JBREUsRUFBQTtBQUVGQyxvQkFGRSxDQUFBO0FBR0ZDLG9CQUFZO0FBSFYsS0F2QmdCO0FBNEJ0QkMsV0FBTztBQUNIVCxlQUFPLFNBQUEsS0FBQSxHQUFZO0FBQ2YsZ0JBQUlVLFFBQUosSUFBQTtBQUNBLGlCQUFBLGNBQUEsR0FBQSxJQUFBLENBQTJCLFlBQVk7QUFDbkNBLHNCQUFBQSxnQkFBQUE7QUFESixhQUFBO0FBSEQsU0FBQTtBQU9ITixtQkFBVyxTQUFBLFNBQUEsR0FBWTtBQUNuQixpQkFBQSxnQkFBQSxDQUFzQixLQUFBLElBQUEsQ0FBdEIsUUFBQTtBQUNBLGlCQUFBLGdCQUFBO0FBVEQsU0FBQTtBQVdISCx5QkFBaUI7QUFYZCxLQTVCZTtBQXlDdEJVLGFBQVM7QUFDTDtBQUNBQyxzQkFBYyxTQUFBLFlBQUEsQ0FBQSxLQUFBLEVBQWlCO0FBQzNCLGdCQUFJQyxPQUFPQyxNQUFBQSxhQUFBQSxDQUFBQSxPQUFBQSxDQUFYLElBQUE7QUFDQSxnQkFBSSxDQUFDRCxLQUFMLFFBQUEsRUFBb0I7QUFDaEIscUJBQUEsS0FBQSxDQUFBLFlBQUEsRUFBQSxJQUFBO0FBQ0g7QUFOQSxTQUFBO0FBUUw7QUFDQUUsb0JBQVksU0FBQSxVQUFBLENBQUEsS0FBQSxFQUFpQjtBQUN6QixnQkFBSUMsUUFBUUYsTUFBQUEsYUFBQUEsQ0FBQUEsT0FBQUEsQ0FBWixLQUFBO0FBQ0EsZ0JBQUlELE9BQU8sS0FBQSxJQUFBLENBQUEsS0FBQSxDQUFYLEtBQVcsQ0FBWDtBQUNBLGdCQUFJLENBQUNBLEtBQUwsUUFBQSxFQUFvQjtBQUNoQixxQkFBQSxLQUFBLENBQUEsV0FBQSxFQUF3QixFQUFFRyxPQUExQixLQUF3QixFQUF4QjtBQUNIO0FBZEEsU0FBQTtBQWdCTDtBQUNBQyx3QkFBZ0IsU0FBQSxjQUFBLEdBQVk7QUFDeEIsZ0JBQUlDLEtBQUssS0FBVCxJQUFBO0FBQUEsZ0JBQW9CbEIsUUFBUWtCLEdBQTVCLEtBQUE7QUFBQSxnQkFBc0NqQixrQkFBa0JpQixHQUF4RCxlQUFBO0FBQ0EsZ0JBQUlDLEtBQUssQ0FBQ25CLE1BQUFBLGVBQUFBLEtBQUQsRUFBQSxFQUFULFFBQUE7QUFBQSxnQkFBa0RvQixXQUFXRCxPQUFPLEtBQVBBLENBQUFBLEdBQUFBLEVBQUFBLEdBQTdELEVBQUE7QUFDQSxpQkFBQSxnQkFBQSxDQUFBLFFBQUE7QUFDQSxtQkFBTyxLQUFBLEdBQUEsQ0FBUyxFQUFFYixVQUFsQixRQUFnQixFQUFULENBQVA7QUFyQkMsU0FBQTtBQXVCTDtBQUNBZSwwQkFBa0IsU0FBQSxnQkFBQSxHQUFZO0FBQzFCLGdCQUFJSCxLQUFLLEtBQVQsSUFBQTtBQUFBLGdCQUFvQkMsS0FBS0QsR0FBekIsS0FBQTtBQUFBLGdCQUFtQ2xCLFFBQVFtQixPQUFPLEtBQVBBLENBQUFBLEdBQUFBLEVBQUFBLEdBQTNDLEVBQUE7QUFBQSxnQkFBb0VHLEtBQUtKLEdBQXpFLFFBQUE7QUFBQSxnQkFBc0ZaLFdBQVdnQixPQUFPLEtBQVBBLENBQUFBLEdBQUFBLEVBQUFBLEdBQWpHLEVBQUE7QUFDQSxnQkFBSWxCLFlBQVltQixLQUFBQSxHQUFBQSxDQUFTdkIsTUFBQUEsTUFBQUEsR0FBVHVCLFdBQUFBLEVBQXFDakIsU0FBQUEsTUFBQUEsR0FBckQsV0FBZ0JpQixDQUFoQjtBQUNBLGlCQUFBLEdBQUEsQ0FBUyxFQUFFaEIsWUFBWWdCLEtBQUFBLEdBQUFBLENBQUFBLFNBQUFBLEVBQW9CLEtBQUEsSUFBQSxDQUEzQyxTQUF1QkEsQ0FBZCxFQUFUO0FBM0JDLFNBQUE7QUE2Qkw7QUFDQUMsMEJBQWtCLFNBQUEsZ0JBQUEsQ0FBQSxRQUFBLEVBQW9CO0FBQ2xDLGdCQUFJaEIsYUFBYWUsS0FBQUEsR0FBQUEsQ0FBU2pCLFNBQUFBLE1BQUFBLEdBQVRpQixXQUFBQSxFQUF3QyxLQUFBLElBQUEsQ0FBekQsU0FBaUJBLENBQWpCO0FBQ0EsbUJBQU8sS0FBQSxHQUFBLENBQVMsRUFBRWYsWUFBbEIsVUFBZ0IsRUFBVCxDQUFQO0FBQ0g7QUFqQ0k7QUF6Q2EsQ0FBMUJiIiwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG52YXIgY29tcG9uZW50XzEgPSByZXF1aXJlKFwiLi4vY29tbW9uL2NvbXBvbmVudFwiKTtcbnZhciBJVEVNX0hFSUdIVCA9IDQ0O1xuY29tcG9uZW50XzEuVmFudENvbXBvbmVudCh7XG4gICAgY2xhc3NlczogW1xuICAgICAgICAnbWFpbi1pdGVtLWNsYXNzJyxcbiAgICAgICAgJ2NvbnRlbnQtaXRlbS1jbGFzcycsXG4gICAgICAgICdtYWluLWFjdGl2ZS1jbGFzcycsXG4gICAgICAgICdjb250ZW50LWFjdGl2ZS1jbGFzcycsXG4gICAgICAgICdtYWluLWRpc2FibGVkLWNsYXNzJyxcbiAgICAgICAgJ2NvbnRlbnQtZGlzYWJsZWQtY2xhc3MnXG4gICAgXSxcbiAgICBwcm9wczoge1xuICAgICAgICBpdGVtczogQXJyYXksXG4gICAgICAgIG1haW5BY3RpdmVJbmRleDoge1xuICAgICAgICAgICAgdHlwZTogTnVtYmVyLFxuICAgICAgICAgICAgdmFsdWU6IDBcbiAgICAgICAgfSxcbiAgICAgICAgYWN0aXZlSWQ6IHtcbiAgICAgICAgICAgIHR5cGU6IFtOdW1iZXIsIFN0cmluZ11cbiAgICAgICAgfSxcbiAgICAgICAgbWF4SGVpZ2h0OiB7XG4gICAgICAgICAgICB0eXBlOiBOdW1iZXIsXG4gICAgICAgICAgICB2YWx1ZTogMzAwXG4gICAgICAgIH1cbiAgICB9LFxuICAgIGRhdGE6IHtcbiAgICAgICAgc3ViSXRlbXM6IFtdLFxuICAgICAgICBtYWluSGVpZ2h0OiAwLFxuICAgICAgICBpdGVtSGVpZ2h0OiAwXG4gICAgfSxcbiAgICB3YXRjaDoge1xuICAgICAgICBpdGVtczogZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgdmFyIF90aGlzID0gdGhpcztcbiAgICAgICAgICAgIHRoaXMudXBkYXRlU3ViSXRlbXMoKS50aGVuKGZ1bmN0aW9uICgpIHtcbiAgICAgICAgICAgICAgICBfdGhpcy51cGRhdGVNYWluSGVpZ2h0KCk7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSxcbiAgICAgICAgbWF4SGVpZ2h0OiBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgICB0aGlzLnVwZGF0ZUl0ZW1IZWlnaHQodGhpcy5kYXRhLnN1Ykl0ZW1zKTtcbiAgICAgICAgICAgIHRoaXMudXBkYXRlTWFpbkhlaWdodCgpO1xuICAgICAgICB9LFxuICAgICAgICBtYWluQWN0aXZlSW5kZXg6ICd1cGRhdGVTdWJJdGVtcydcbiAgICB9LFxuICAgIG1ldGhvZHM6IHtcbiAgICAgICAgLy8g5b2T5LiA5Liq5a2Q6aG56KKr6YCJ5oup5pe2XG4gICAgICAgIG9uU2VsZWN0SXRlbTogZnVuY3Rpb24gKGV2ZW50KSB7XG4gICAgICAgICAgICB2YXIgaXRlbSA9IGV2ZW50LmN1cnJlbnRUYXJnZXQuZGF0YXNldC5pdGVtO1xuICAgICAgICAgICAgaWYgKCFpdGVtLmRpc2FibGVkKSB7XG4gICAgICAgICAgICAgICAgdGhpcy4kZW1pdCgnY2xpY2staXRlbScsIGl0ZW0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICAvLyDlvZPkuIDkuKrlr7zoiKrooqvngrnlh7vml7ZcbiAgICAgICAgb25DbGlja05hdjogZnVuY3Rpb24gKGV2ZW50KSB7XG4gICAgICAgICAgICB2YXIgaW5kZXggPSBldmVudC5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuaW5kZXg7XG4gICAgICAgICAgICB2YXIgaXRlbSA9IHRoaXMuZGF0YS5pdGVtc1tpbmRleF07XG4gICAgICAgICAgICBpZiAoIWl0ZW0uZGlzYWJsZWQpIHtcbiAgICAgICAgICAgICAgICB0aGlzLiRlbWl0KCdjbGljay1uYXYnLCB7IGluZGV4OiBpbmRleCB9KTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgLy8g5pu05paw5a2Q6aG55YiX6KGoXG4gICAgICAgIHVwZGF0ZVN1Ykl0ZW1zOiBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgICB2YXIgX2EgPSB0aGlzLmRhdGEsIGl0ZW1zID0gX2EuaXRlbXMsIG1haW5BY3RpdmVJbmRleCA9IF9hLm1haW5BY3RpdmVJbmRleDtcbiAgICAgICAgICAgIHZhciBfYiA9IChpdGVtc1ttYWluQWN0aXZlSW5kZXhdIHx8IHt9KS5jaGlsZHJlbiwgY2hpbGRyZW4gPSBfYiA9PT0gdm9pZCAwID8gW10gOiBfYjtcbiAgICAgICAgICAgIHRoaXMudXBkYXRlSXRlbUhlaWdodChjaGlsZHJlbik7XG4gICAgICAgICAgICByZXR1cm4gdGhpcy5zZXQoeyBzdWJJdGVtczogY2hpbGRyZW4gfSk7XG4gICAgICAgIH0sXG4gICAgICAgIC8vIOabtOaWsOe7hOS7tuaVtOS9k+mrmOW6pu+8jOagueaNruacgOWkp+mrmOW6puWSjOW9k+WJjee7hOS7tumcgOimgeWxleekuueahOmrmOW6puadpeWGs+WumlxuICAgICAgICB1cGRhdGVNYWluSGVpZ2h0OiBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgICB2YXIgX2EgPSB0aGlzLmRhdGEsIF9iID0gX2EuaXRlbXMsIGl0ZW1zID0gX2IgPT09IHZvaWQgMCA/IFtdIDogX2IsIF9jID0gX2Euc3ViSXRlbXMsIHN1Ykl0ZW1zID0gX2MgPT09IHZvaWQgMCA/IFtdIDogX2M7XG4gICAgICAgICAgICB2YXIgbWF4SGVpZ2h0ID0gTWF0aC5tYXgoaXRlbXMubGVuZ3RoICogSVRFTV9IRUlHSFQsIHN1Ykl0ZW1zLmxlbmd0aCAqIElURU1fSEVJR0hUKTtcbiAgICAgICAgICAgIHRoaXMuc2V0KHsgbWFpbkhlaWdodDogTWF0aC5taW4obWF4SGVpZ2h0LCB0aGlzLmRhdGEubWF4SGVpZ2h0KSB9KTtcbiAgICAgICAgfSxcbiAgICAgICAgLy8g5pu05paw5a2Q6aG55YiX6KGo6auY5bqm77yM5qC55o2u5Y+v5bGV56S655qE5pyA5aSn6auY5bqm5ZKM5b2T5YmN5a2Q6aG55YiX6KGo55qE6auY5bqm5Yaz5a6aXG4gICAgICAgIHVwZGF0ZUl0ZW1IZWlnaHQ6IGZ1bmN0aW9uIChzdWJJdGVtcykge1xuICAgICAgICAgICAgdmFyIGl0ZW1IZWlnaHQgPSBNYXRoLm1pbihzdWJJdGVtcy5sZW5ndGggKiBJVEVNX0hFSUdIVCwgdGhpcy5kYXRhLm1heEhlaWdodCk7XG4gICAgICAgICAgICByZXR1cm4gdGhpcy5zZXQoeyBpdGVtSGVpZ2h0OiBpdGVtSGVpZ2h0IH0pO1xuICAgICAgICB9XG4gICAgfVxufSk7XG4iXSwiZmlsZSI6ImluZGV4LmpzIn0=
  103. export default global['__wxComponents']['vant/tree-select/index']
  104. </script>
  105. <style platform="mp-weixin">
  106. @import '../common/index.css';.van-tree-select{position:relative;font-size:14px;-webkit-user-select:none;user-select:none}.van-tree-select__nav{position:absolute;top:0;bottom:0;left:0;width:35%;min-width:120px;background-color:#fafafa}.van-tree-select__nitem{position:relative;padding:0 9px 0 15px;line-height:44px}.van-tree-select__nitem--active:after{position:absolute;top:0;bottom:0;left:0;width:3.6px;background-color:#f44;content:""}.van-tree-select__nitem--active{font-weight:700;background-color:#fff}.van-tree-select__nitem--disabled{color:#999}.van-tree-select__content{width:65%;padding-left:15px;margin-left:35%;background-color:#fff;box-sizing:border-box}.van-tree-select__item{position:relative;font-weight:700;line-height:44px}.van-tree-select__item--active{color:#f44}.van-tree-select__item--disabled{color:#999}.van-tree-select__selected{position:absolute;top:0;right:15px;bottom:0;height:24px;margin:auto 0;line-height:24px}
  107. </style>