uni-collapse.vue 858 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="uni-collapse">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'UniCollapse',
  9. props: {
  10. accordion: {
  11. // 是否开启手风琴效果
  12. type: [Boolean, String],
  13. default: false
  14. }
  15. },
  16. data() {
  17. return {}
  18. },
  19. provide() {
  20. return {
  21. collapse: this
  22. }
  23. },
  24. created() {
  25. this.childrens = []
  26. },
  27. methods: {
  28. onChange() {
  29. let activeItem = []
  30. this.childrens.forEach((vm, index) => {
  31. if (vm.isOpen) {
  32. activeItem.push(vm.nameSync)
  33. }
  34. })
  35. this.$emit('change', activeItem)
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. @import '@/uni.scss';
  42. .uni-collapse {
  43. /* #ifndef APP-NVUE */
  44. width: 100%;
  45. display: flex;
  46. /* #endif */
  47. /* #ifdef APP-NVUE */
  48. flex: 1;
  49. /* #endif */
  50. flex-direction: column;
  51. background-color: $uni-bg-color;
  52. }
  53. </style>