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

vue3-js版组件库

import { computed, inject } from 'vue'
import * as utils from '../../utils/common'
import McCollapseTransition from '../collapse-transition/index'
import ICON_CLOSE from '../../img/icon_collapse_close.svg'
import ICON_OPEN from '../../img/icon_collapse_open.svg'

const CollapseItem = {
    name: 'McCollapseItem',
    props: {
        title: {
            type: String,
            default: '',
        },
        name: { // 标识符
            type: [String, Number],
            default: () => {
                return utils._uuid()
            },
        },
        disabled: Boolean,
        contentBgColor: String,
    },
    setup(props, { emit, slots }) {

        const collapse = inject('collapse')

        /**
         * 控制content的显示隐藏
         */
        const isActive = computed(() => {
            return collapse?.activeNames.value.indexOf(props.name) > -1
        })

        /**
         * 点击子组件,触发父组件点击事件
         */
        const handleHeaderClick = () => {
            if (props.disabled) return false
            collapse?.handleItemClick(props.name)
        }

        return () => (
            <div class={[
                'mc-collapse-item',
                { 'is-disabled': props.disabled }
            ]}>
                <div>
                    <div class="mc-collapse-item__header"
                        onClick={handleHeaderClick}>
                        {
                            slots.title ? slots.title() : ''
                        }
                        <img class="mc-collapse-item__header--img-arrow" src={isActive.value? ICON_CLOSE : ICON_OPEN} />
                    </div>
                </div>
                <McCollapseTransition>
                    <div class="mc-collapse-item__content"
                        v-show={isActive.value}
                        style={{'background-color': props.contentBgColor}}>
                        {
                            slots.default ? slots.default() : ''
                        }
                    </div>
                </McCollapseTransition>
            </div>
        )
    }
}

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

const McCollapseItem = CollapseItem

export { McCollapseItem, McCollapseItem as default }