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

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

import Icon from '../icon/icon.jsx';
import { Namespace } from '../../utils/namespace';

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

export default {
    name: namespace.name,
    components: {
        Icon
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: ''
        },
        theme: {
            type: String,
            default: 'brand'
        },
        color: {
            type: String,
            default: '#1989fa'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        icon: {
            type: String,
            default: 'checkbox-checked'
        },
        activeIcon: {
            type: String,
            default: 'checkbox-unchecked'
        },
        iconClassPrefix: {
            type: String,
            default: 'mx-icon'
        }
    },
    computed: {
        cls () {
            return namespace.derive([
                this.theme,
                {
                    disabled: this.disabled
                }
            ]);
        },
        contentCls () {
            return namespace.derive('content');
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    methods: {
        onClick () {
            if (this.disabled || this.$el.hasAttribute('disabled')) {
                return;
            }
            this.emitChange(!this.value);
        },
        emitChange (value) {
            this.$emit('change', value);
        }
    },
    render () {
        return (
            <div class={this.cls} vOn:click_stop={this.onClick}>
                <Icon name={this.value ? this.activeIcon : this.icon} class-prefix={this.iconClassPrefix} size="20" theme={this.theme} color={this.color} />
                {
                    this.$slots.default || (
                        this.text && <div class={this.contentCls}>{this.text}</div>
                    )
                }
            </div>
        )
    }
}