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

vue3-js版组件库

import LoadingIcon from './LoadingIcon'
const Button = {
    name: 'McButton',
    props: {
        loading: Boolean,
        loadingText: {
            type: String,
            default: '加载中...'
        },
        type: String,
        size: String,
        width: [Number, String],
        height: [Number, String],
        disabled: Boolean,
    },
    emits: ['click'],
    setup(props, { emit, slots }) {

        const handleClick = (e) => {
            e.preventDefault()
            if (props.disabled || props.loading) return
            emit('click')
        }

        const loadingStatusNode = () => (
            <>
                <LoadingIcon style="margin-right:4px;" />
                {props.loadingText}
            </>
        )

        return () => (
            <button class={[
                'mc-button',
                {
                    'mc-button__cancel': props.type === 'cancel',
                    'mc-button__delete': props.type === 'delete',
                    'mc-button__warning': props.type === 'warning',
                    'mc-button__inverse': props.type === 'inverse',
                    'big': props.size === 'big',
                    'small': props.size === 'small',
                    'loading': props.loading
                }]}
            style={{
                width: props.width ? props.width + 'px' : '',
                height: props.height ? props.height + 'px' : '',
            }}
            disabled={props.loading || props.disabled}
            onClick={handleClick}>
                {
                    props.loading ? loadingStatusNode() : slots.default ? slots.default() : ''
                }
            </button>
        )
    }
}

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

const McButton = Button

export { McButton, McButton as default }