index.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <uni-shadow-root class="vant-collapse-index"><view :class="'custom-class van-collapse '+(border ? 'van-hairline--top-bottom' : '')">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <script>
  7. global['__wxRoute'] = 'vant/collapse/index'
  8. import { VantComponent } from '../common/component';
  9. import { useChildren } from '../common/relation';
  10. VantComponent({
  11. relation: useChildren('collapse-item'),
  12. props: {
  13. value: {
  14. type: null,
  15. observer: 'updateExpanded',
  16. },
  17. accordion: {
  18. type: Boolean,
  19. observer: 'updateExpanded',
  20. },
  21. border: {
  22. type: Boolean,
  23. value: true,
  24. },
  25. },
  26. methods: {
  27. updateExpanded() {
  28. this.children.forEach((child) => {
  29. child.updateExpanded();
  30. });
  31. },
  32. switch(name, expanded) {
  33. const { accordion, value } = this.data;
  34. const changeItem = name;
  35. if (!accordion) {
  36. name = expanded
  37. ? (value || []).concat(name)
  38. : (value || []).filter((activeName) => activeName !== name);
  39. }
  40. else {
  41. name = expanded ? name : '';
  42. }
  43. if (expanded) {
  44. this.$emit('open', changeItem);
  45. }
  46. else {
  47. this.$emit('close', changeItem);
  48. }
  49. this.$emit('change', name);
  50. this.$emit('input', name);
  51. },
  52. },
  53. });
  54. export default global['__wxComponents']['vant/collapse/index']
  55. </script>
  56. <style platform="mp-weixin">
  57. @import '../common/index.css';
  58. </style>