uni-collapse.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <!-- 父组件暂时无用,后续子组件联动需要使用到父组件 -->
  3. <view>
  4. <slot></slot>
  5. </view>
  6. </template>
  7. <script lang="uts">
  8. export default {
  9. name: "UniCollapse",
  10. props: {
  11. // 是否开启手风琴效果
  12. accordion: {
  13. type: Boolean,
  14. default: true
  15. }
  16. },
  17. data() {
  18. return {
  19. child_nodes: [] as Array<ComponentPublicInstance>
  20. };
  21. },
  22. methods: {
  23. init(child : ComponentPublicInstance) {
  24. this.child_nodes.push(child)
  25. },
  26. // 关闭所有
  27. cloceAll() {
  28. // 开启手风琴效果才回关闭其他
  29. if (this.accordion && this.child_nodes.length > 0) {
  30. this.child_nodes.forEach((item) => {
  31. const is_open = item.$data['is_open'] as boolean
  32. // TODO 暂时无法获取子组件上的属性和方法,暂时使用绕过方案
  33. if (is_open) {
  34. item.$data['is_open'] = false
  35. item.$callMethod('openOrClose', false)
  36. }
  37. })
  38. }
  39. }
  40. }
  41. }
  42. </script>
  43. <style>
  44. </style>