index.vue 1.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <uni-shadow-root class="vant-dist-sidebar-index"><view class="van-sidebar custom-class">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <script>
  7. global['__wxRoute'] = 'vant/dist/sidebar/index'
  8. import { VantComponent } from '../common/component';
  9. import { useChildren } from '../common/relation';
  10. VantComponent({
  11. relation: useChildren('sidebar-item', function () {
  12. this.setActive(this.data.activeKey);
  13. }),
  14. props: {
  15. activeKey: {
  16. type: Number,
  17. value: 0,
  18. observer: 'setActive',
  19. },
  20. },
  21. beforeCreate() {
  22. this.currentActive = -1;
  23. },
  24. methods: {
  25. setActive(activeKey) {
  26. const { children, currentActive } = this;
  27. if (!children.length) {
  28. return Promise.resolve();
  29. }
  30. this.currentActive = activeKey;
  31. const stack = [];
  32. if (currentActive !== activeKey && children[currentActive]) {
  33. stack.push(children[currentActive].setActive(false));
  34. }
  35. if (children[activeKey]) {
  36. stack.push(children[activeKey].setActive(true));
  37. }
  38. return Promise.all(stack);
  39. },
  40. },
  41. });
  42. export default global['__wxComponents']['vant/dist/sidebar/index']
  43. </script>
  44. <style platform="mp-weixin">
  45. @import '../common/index.css';.van-sidebar{width:80px;width:var(--sidebar-width,80px)}
  46. </style>