magiccube-vue3/package/components/select-option/index.js

vue3-js版组件库

import { inject, onBeforeUnmount } from 'vue'
const SelectOption = {
    name: 'McSelectOption',
    props: {
        name: {
            type: [String, Number],
            default: ''
        },
        value: [String, Number],
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    emits: [],
    setup(props, { slots }) {
        const handleSelect = inject('handleSelect', () => { })
        const optionsData = inject('optionsData', [])
        const getChecked = inject('getChecked', () => {})

        optionsData.value.push({
            value: props.value,
            name: props.name
        })

        const handleClick = () => {
            if (props.disabled) return false
            handleSelect({
                name: props.name,
                value: props.value
            })
        }

        onBeforeUnmount(() => {
            const i = optionsData.value.findIndex(item => item.value === props.value)
            optionsData.value.splice(i, 1)
        })

        return () => (
            <li class={{
                'mc-select-option': true,
                disabled: props.disabled,
                active: getChecked(props.value)
            }}  onClick={handleClick}>
                {slots.default ? slots.default() : props.name}
            </li>
        )
    }
}
SelectOption.install = (app) => {
    app.component(SelectOption.name, SelectOption)
}

const McSelectOption = SelectOption

export { McSelectOption, McSelectOption as default }