index.vue 1.6 KB

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