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

vue3-js版组件库

import { ref } from 'vue'
import Dropdown from '../../utils/dropdown'

const DropdownComponent = {
    name: 'McDropdown',
    props: {
        modelValue: [String, Number],
        downMenuHeight: {
            type: Number,
            default: 268
        },
        dropdownWidth: [Number, String]
    },
    setup(props, { emit, slots, expose }){
        const pickerEl = ref(null)
        const dropdownEl = ref(null)
        const innerEl = ref(null)
        const slide = ref(false)

        const setSlideDown = (event) => {
            const options = {
                event,
                pickerHeight: pickerEl.value.offsetHeight,
                dropdownHeight: innerEl.value?.offsetHeight || props.downMenuHeight,
                dropdownWidth: props.dropdownWidth || ''
            }
            dropdownEl.value.visible(options)
        }

        const setSlideUp = () => {
            dropdownEl.value.invisible()
        }

        const handleShowDropdown = (e) => {
            if (slide.value) {
                /**
                 * 隐藏下拉
                 */
                setSlideUp(e)
                return false
            }

            /**
             * 打开下拉
             */
            setSlideDown(e)
        }

        const close = () => setSlideUp()

        expose({
            close
        })

        return () => (
            <div class="mc-dropdown-component" ref={pickerEl}>
                <div onClick={handleShowDropdown}>
                    {
                        slots.default? slots.default() : ''
                    }
                </div>
                <Dropdown
                    ref={dropdownEl}
                    picker={pickerEl.value}
                    onClose={setSlideUp}>
                    <div ref={innerEl}>
                        {
                            slots.dropdown? slots.dropdown() : ''
                        }
                    </div>
                </Dropdown>
            </div>
        )
    }
}

DropdownComponent.install = Vue => {
    Vue.component(DropdownComponent.name, DropdownComponent)
}

const McDropdown = DropdownComponent

export { McDropdown, McDropdown as default }