#

whycq

2023-02-13 1bea37073f305929215bf2c3f28e2263acb6fc20

 uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue

New file
@@ -0,0 +1,147 @@
<template>
   <view class="uni-collapse">
      <slot />
   </view>
</template>
<script>
   /**
    * Collapse 折叠面板
    * @description 展示可以折叠 / 展开的内容区域
    * @tutorial https://ext.dcloud.net.cn/plugin?id=23
    * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
    * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
    * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
    */
   export default {
      name: 'uniCollapse',
      emits:['change','activeItem','input','update:modelValue'],
      props: {
         value: {
            type: [String, Array],
            default: ''
         },
         modelValue: {
            type: [String, Array],
            default: ''
         },
         accordion: {
            // 是否开启手风琴效果
            type: [Boolean, String],
            default: false
         },
      },
      data() {
         return {}
      },
      computed: {
         // TODO 兼容 vue2 和 vue3
         dataValue() {
            let value = (typeof this.value === 'string' && this.value === '') ||
               (Array.isArray(this.value) && this.value.length === 0)
            let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
               (Array.isArray(this.modelValue) && this.modelValue.length === 0)
            if (value) {
               return this.modelValue
            }
            if (modelValue) {
               return this.value
            }

            return this.value
         }
      },
      watch: {
         dataValue(val) {
            this.setOpen(val)
         }
      },
      created() {
         this.childrens = []
         this.names = []
      },
      mounted() {
         this.$nextTick(()=>{
            this.setOpen(this.dataValue)
         })
      },
      methods: {
         setOpen(val) {
            let str = typeof val === 'string'
            let arr = Array.isArray(val)
            this.childrens.forEach((vm, index) => {
               if (str) {
                  if (val === vm.nameSync) {
                     if (!this.accordion) {
                        console.warn('accordion 属性为 false ,v-model 类型应该为 array')
                        return
                     }
                     vm.isOpen = true
                  }
               }
               if (arr) {
                  val.forEach(v => {
                     if (v === vm.nameSync) {
                        if (this.accordion) {
                           console.warn('accordion 属性为 true ,v-model 类型应该为 string')
                           return
                        }
                        vm.isOpen = true
                     }
                  })
               }
            })
            this.emit(val)
         },
         setAccordion(self) {
            if (!this.accordion) return
            this.childrens.forEach((vm, index) => {
               if (self !== vm) {
                  vm.isOpen = false
               }
            })
         },
         resize() {
            this.childrens.forEach((vm, index) => {
               // #ifndef APP-NVUE
               vm.getCollapseHeight()
               // #endif
               // #ifdef APP-NVUE
               vm.getNvueHwight()
               // #endif
            })
         },
         onChange(isOpen, self) {
            let activeItem = []

            if (this.accordion) {
               activeItem = isOpen ? self.nameSync : ''
            } else {
               this.childrens.forEach((vm, index) => {
                  if (vm.isOpen) {
                     activeItem.push(vm.nameSync)
                  }
               })
            }
            this.$emit('change', activeItem)
            this.emit(activeItem)
         },
         emit(val){
            this.$emit('input', val)
            this.$emit('update:modelValue', val)
         }
      }
   }
</script>
<style lang="scss" >
   .uni-collapse {
      /* #ifndef APP-NVUE */
      width: 100%;
      display: flex;
      /* #endif */
      /* #ifdef APP-NVUE */
      flex: 1;
      /* #endif */
      flex-direction: column;
      background-color: #fff;
   }
</style>