vxe-table-demonic/es/checkbox/src/checkbox.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

import { defineComponent, h, computed, inject } from 'vue';
import XEUtils from 'xe-utils';
import { getFuncText } from '../../tools/utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { useSize } from '../../hooks/size';
export default defineComponent({
    name: 'VxeCheckbox',
    props: {
        modelValue: [String, Number, Boolean],
        label: { type: [String, Number], default: null },
        indeterminate: Boolean,
        title: [String, Number],
        checkedValue: { type: [String, Number, Boolean], default: true },
        uncheckedValue: { type: [String, Number, Boolean], default: false },
        content: [String, Number],
        disabled: Boolean,
        size: { type: String, default: function () { return GlobalConfig.checkbox.size || GlobalConfig.size; } }
    },
    emits: [
        'update:modelValue',
        'change'
    ],
    setup: function (props, context) {
        var slots = context.slots, emit = context.emit;
        var $xeform = inject('$xeform', null);
        var $xeformiteminfo = inject('$xeformiteminfo', null);
        var xID = XEUtils.uniqueId();
        var $xecheckbox = {
            xID: xID,
            props: props,
            context: context
        };
        var checkboxMethods = {};
        var computeSize = useSize(props);
        var $xecheckboxgroup = inject('$xecheckboxgroup', null);
        var computeIsChecked = computed(function () {
            if ($xecheckboxgroup) {
                return XEUtils.includes($xecheckboxgroup.props.modelValue, props.label);
            }
            return props.modelValue === props.checkedValue;
        });
        var computeIsDisabled = computed(function () {
            if (props.disabled) {
                return true;
            }
            if ($xecheckboxgroup) {
                var groupProps = $xecheckboxgroup.props;
                var computeIsMaximize = $xecheckboxgroup.getComputeMaps().computeIsMaximize;
                var isMaximize = computeIsMaximize.value;
                var isChecked = computeIsChecked.value;
                return groupProps.disabled || (isMaximize && !isChecked);
            }
            return false;
        });
        var changeEvent = function (evnt) {
            var checkedValue = props.checkedValue, uncheckedValue = props.uncheckedValue;
            var isDisabled = computeIsDisabled.value;
            if (!isDisabled) {
                var checked = evnt.target.checked;
                var value = checked ? checkedValue : uncheckedValue;
                var params = { checked: checked, value: value, label: props.label };
                if ($xecheckboxgroup) {
                    $xecheckboxgroup.handleChecked(params, evnt);
                }
                else {
                    emit('update:modelValue', value);
                    checkboxMethods.dispatchEvent('change', params, evnt);
                    // 自动更新校验状态
                    if ($xeform && $xeformiteminfo) {
                        $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
                    }
                }
            }
        };
        checkboxMethods = {
            dispatchEvent: function (type, params, evnt) {
                emit(type, Object.assign({ $checkbox: $xecheckbox, $event: evnt }, params));
            }
        };
        Object.assign($xecheckbox, checkboxMethods);
        var renderVN = function () {
            var _a;
            var vSize = computeSize.value;
            var isDisabled = computeIsDisabled.value;
            var isChecked = computeIsChecked.value;
            var indeterminate = props.indeterminate;
            return h('label', {
                class: ['vxe-checkbox', (_a = {},
                        _a["size--".concat(vSize)] = vSize,
                        _a['is--indeterminate'] = indeterminate,
                        _a['is--disabled'] = isDisabled,
                        _a['is--checked'] = isChecked,
                        _a)],
                title: props.title
            }, [
                h('input', {
                    class: 'vxe-checkbox--input',
                    type: 'checkbox',
                    disabled: isDisabled,
                    checked: isChecked,
                    onChange: changeEvent
                }),
                h('span', {
                    class: ['vxe-checkbox--icon', indeterminate ? 'vxe-icon-checkbox-indeterminate' : (isChecked ? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked')]
                }),
                h('span', {
                    class: 'vxe-checkbox--label'
                }, slots.default ? slots.default({}) : getFuncText(props.content))
            ]);
        };
        $xecheckbox.renderVN = renderVN;
        return $xecheckbox;
    },
    render: function () {
        return this.renderVN();
    }
});