@minix-iot/ui/dist/packages/collapse/collapse.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from "../../utils/namespace";
import { ArrayExtension } from "../../utils/extensions/array";

const namespace = Namespace.Create('collapse');

export default {
  name: namespace.name,
  props: {
    accordion: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Number, String, Array],
      default:()=>[]
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data(){
    return {
      innerValue:this.value
    }
  },
  computed: {
    cls () {
      return namespace.derive()
    }
  },
  watch:{
    value(val){
      this.innerValue = val
    }
  },
  methods: {
    setActive (value) {
      this.$emit('change', value);
    },
    handleItemClick (value) {
      if (this.accordion) {
        this.innerValue = this.innerValue == value ? '' : value
      } else {
        this.innerValue = ArrayExtension.Toggle(this.innerValue,value)
      }
      this.setActive(this.innerValue)
    }
  },
  render () {
    return (
      <div class={this.cls}>
        {this.$slots.default}
      </div>
    )
  }
}