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

vue3-js版组件库

const Link = {
    name: 'McLink',
    props: {
        disabled: Boolean,
        important: Boolean,
        fontSize: {
            type: [String, Number],
            default: 14
        }
    },
    emits: ['click'],
    setup(props, { emit, slots }) {
        const handleClick = () => !props.disabled && emit('click')
        return () => (
            <span class={[
                'mc-link',
                { disabled: props.disabled, important: props.important }
            ]}
            style={{
                fontSize: typeof props.fontSize === 'string'? props.fontSize.replace('px', '') + 'px' : props.fontSize + 'px'
            }}
            onClick={handleClick}>
                {
                    slots.default ? slots.default() : ''
                }
            </span>
        )
    }
}

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

const McLink = Link

export { McLink, McLink as default }