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

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

import { defineComponent, h, nextTick, reactive, ref } from 'vue';
import XEUtils from 'xe-utils';
import { getFuncText } from '../../tools/utils';
export default defineComponent({
    name: 'vxeTag',
    props: {
        content: [String, Number],
        color: {
            type: String,
            default: 'default'
        },
        size: {
            type: String,
            default: 'medium'
        },
        closable: {
            type: Boolean,
            default: false
        },
        editable: {
            type: Boolean,
            default: false
        },
        round: Boolean,
        tagStyle: {
            type: String,
            default: 'default'
        },
        icon: String,
        iconSet: {
            type: String,
            default: ''
        },
        align: {
            type: String,
            default: 'middle'
        }
    },
    emits: [
        'close',
        'update:content',
        'icon-click',
        'edit'
    ],
    setup: function (props, context) {
        var slots = context.slots, emit = context.emit;
        var xID = XEUtils.uniqueId();
        var tagStyleList = [
            'default', 'outline', 'flag', 'dashed', 'mark', 'arrow'
        ];
        var reactData = reactive({
            inited: false,
            editing: false
        });
        var refElem = ref();
        var refContent = ref();
        var refMaps = {
            refElem: refElem
        };
        var closeTag = function (event) { return new Promise(function () {
            event.stopPropagation();
            emit('close', { $event: { tag: $vxtag } });
        }); };
        var startEditing = function () { return new Promise(function (resolve) {
            if (props.editable && !reactData.editing) {
                reactData.editing = true;
                nextTick(function () {
                    refContent.value.focus();
                    var range = document.createRange();
                    range.selectNodeContents(refContent.value);
                    var selection = window.getSelection();
                    selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
                    selection === null || selection === void 0 ? void 0 : selection.addRange(range);
                    resolve(true);
                });
            }
            else {
                resolve(true);
            }
        }); };
        var handleContentEdited = function () {
            if (props.editable) {
                if (reactData.editing) {
                    emit('update:content', refContent.value.innerText);
                    emit('edit', refContent.value.innerText);
                }
                reactData.editing = false;
            }
        };
        var handleIconClick = function () {
            emit('icon-click', { $event: { tag: $vxtag } });
        };
        var tagMethods = {};
        var $vxtag = {
            xID: xID,
            props: props,
            context: context,
            reactData: reactData,
            getRefMaps: function () { return refMaps; }
        };
        tagMethods = {
            dispatchEvent: function (type, params, event) {
                emit(type, Object.assign({ $tag: $vxtag, $event: event }, params));
            },
            close: closeTag,
            startEditing: startEditing
        };
        Object.assign($vxtag, tagMethods);
        var renderContent = function () { var _a, _b; return (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : getFuncText(props.content); };
        var renderIcon = function () {
            var _a, _b;
            return (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.icon) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : (props.icon ? h('i', {
                class: [
                    'vxe-tag--icon',
                    props.iconSet,
                    props.icon
                ],
                onClick: handleIconClick
            }) : null);
        };
        var renderVN = function () {
            var _a, _b;
            var presetColors = [
                'default', 'info', 'primary', 'success', 'warning', 'danger', 'error', 'perfect'
            ];
            return h('span', {
                ref: refElem,
                class: [
                    'vxe-tag',
                    props.editable && reactData.editing ? 'is--editing' : '',
                    props.closable ? 'vxe-tag--closable' : '',
                    "size--".concat(props.size),
                    "vxe-tag-type--".concat(tagStyleList.includes(props.tagStyle) ? props.tagStyle : 'default'),
                    props.round ? 'is--round' : '',
                    "vxe-tag-align--".concat(props.align),
                    props.color
                        ? presetColors.includes(props.color)
                            ? "vxe-tag-color--".concat(props.color)
                            : ''
                        : 'vxe-tag-color--default',
                    {
                        closable: props.closable
                    }
                ],
                style: presetColors.includes(props.color) ? null : {
                    '--tag-color': props.color
                }
            }, [
                props.closable ? h('div', {
                    class: 'vxe-tag-close-icon',
                    onClick: function (event) {
                        // closeTag(event)
                        tagMethods.dispatchEvent('close', {}, event);
                    }
                }, [
                    'x'
                ]) : null,
                (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.avatar) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : null,
                h('span', {
                    class: ['vxe-tag-content', { 'tag-select-none': props.editable }],
                    ref: refContent,
                    contentEditable: props.editable && reactData.editing,
                    onClick: startEditing,
                    onBlur: handleContentEdited,
                    onKeydown: function (event) {
                        if (event.key === 'Enter') {
                            handleContentEdited();
                        }
                        else if (event.key === 'Escape') {
                            handleContentEdited();
                        }
                        else if (event.key === 'Tab') {
                            handleContentEdited();
                        }
                    }
                }, renderContent()),
                renderIcon()
            ]);
        };
        $vxtag.renderVN = renderVN;
        return $vxtag;
    },
    render: function () {
        return this.renderVN();
    }
});