magiccube-vue3/package/components/collapse/index.js

vue3-js版组件库

import { ref, provide, watch } from 'vue'

const Collapse = {
    name: 'McCollapse',
    props: {
        accordion: Boolean,
        modelValue: {
            type: [Array, String, Number],
            default: () => [],
        }
    },
    /**
     * @params
     * accordion: 是否手风琴模式
     * modelValue: 当前激活的面板
     */
    emits: ['update:modelValue', 'change'],
    setup(props, { emit, slots }) {

        /**
         * 内部使用activeNames这个值   对传进来的值做个包装
         */
        const activeNames = ref([].concat(props.modelValue))

        watch(
            () => props.modelValue,
            () => {
                activeNames.value = [].concat(props.modelValue)
            }
        )

        const setActiveNames = (_activeNames) => {
            activeNames.value = [].concat(_activeNames)
            const value = props.accordion ? activeNames.value[0] : activeNames.value
            emit('update:modelValue', value)
            emit('change', value)
        }

        /**
         * 点击子组件，将点击事件传入传入子组件
         */
        const handleItemClick = (name) => {
            if(props.accordion){
                //手风琴模式，每次只展示一个面板
                setActiveNames(
                    (activeNames.value[0] || activeNames.value[0] === 0) &&
                    activeNames.value[0] === name ? '' : name
                )
            } else {
                const _activeNames = activeNames.value.slice(0)
                const index = _activeNames.indexOf(name)

                if (index > -1) {
                    _activeNames.splice(index, 1)
                } else {
                    _activeNames.push(name)
                }
                setActiveNames(_activeNames)
            }
        }

        /**
         * 提供给子组件
         */
        provide('collapse', {
            activeNames,
            handleItemClick,
        })

        return () => (
            <div class="mc-collapse">
                {
                    slots.default ? slots.default() : ''
                }
            </div>
        )
    }
}

Collapse.install = (app) => {
    app.component(Collapse.name, Collapse)
}

const McCollapse = Collapse

export { McCollapse, McCollapse as default }