@minix-iot/ui/dist/packages/button/button.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from "../../utils/namespace";
import { Color } from "../../utils/color";
import Icon from '../icon/icon.jsx'
import Loading from "../loading/loading.jsx";

const namespace = Namespace.Create('button');

export default {
    name: namespace.name,
    components: {
        Icon,
        Loading
    },
    props: {
        tag: {
            type: String,
            default: 'button'
        },
        type: {
            type: String,
            default: 'fill'
        },
        theme: {
            type: String,
            default: 'brand'
        },
        size: {
            type: String,
            default: 'middle'
        },
        color: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        iconPrefix: {
            type: String
        },
        disabled: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        round: {
            type: Boolean,
            default: true
        },
        iconPosition: {
            type: String,
            default: 'left'
        },
        loadingType: {
            type: String,
            default: 'spinner'
        }
    },
    data() {
        return {
            active: false
        }
    },
    computed: {
        cls() {
            return namespace.derive([
                this.theme,
                this.type,
                this.size,
                {
                    round: this.round,
                    disabled: this.disabled,
                    active: this.active,
                    loading: this.loading
                }
            ]);
        },
        iconCls() {
            return namespace.derive('icon',[this.size, this.iconPosition])
        },
        loadingCls(){
            return namespace.derive('loading',[this.iconPosition])
        },
        style() {
            const style = {}
            if (this.color) {
                const color = Color.FromHex(this.color);
                switch (this.type) {
                    case 'fill':
                        style.color = color.isDark ? Color.WHITE : Color.BLACK;
                        style.backgroundColor =this.active ? Color.Shift(color, 0.1) : color;
                        break;
                    case 'weak':
                        const background = Color.Shift(color, -0.85);
                        style.color = color;
                        style.backgroundColor= this.active ? Color.Shift(background, 0.1) : background;
                        break;
                    case 'plain':
                        style.color = color;
                        style.borderColor= color;
                        this.active && (style.backgroundColor = Color.Shift(color, -0.85));
                        break;
                    case 'text':
                        style.color = this.active ? Color.Shift(color, 0.1) : color;
                        break;
                }
            }
            return style
        }
    },
    methods: {
        onClick(e) {
            if (this.loading || this.disabled) {
                return;
            }
            this.$emit('click', e);
        },
        onTouchStart() {
            if (this.loading || this.disabled) {
                return;
            }
            this.active = true;
        },
        onTouchEnd() {
            if (this.loading || this.disabled) {
                return;
            }
            this.active = false;
        }
    },
    render() {
        const renderLoading = () => {
            if (this.$slots.loading) {
                return this.$slots.loading
            }
            return <Loading class={this.loadingCls} type={this.loadingType} size = {18} />
        }

        const renderIcon = () => {
            if (this.loading) {
                return renderLoading()
            }
            if (this.icon) {
                return <Icon name={this.icon} classPrefix={this.iconPrefix} class={this.iconCls}/>
            }
        }
        
        const { tag } = this.$props
        return (
            <tag class={this.cls}
                style={this.style}
                onClick={this.onClick}
                onTouchstart={this.onTouchStart}
                onTouchend={this.onTouchEnd}
                onTouchcancel={this.onTouchEnd}
            >
                {(this.iconPosition === 'left') && renderIcon()}
                {this.$slots.default}
                {(this.iconPosition === 'right') && renderIcon()}
            </tag>
        )
    }
}