InputTag 标签输入框

规则

基础示例

const rule = {
    type:"elInputTag",
    title:"标签",
    field:"tag",
    value: ['tag1', 'tag2', 'tag3']
}

Props 配置示例

限制标签数量

const rule = {
    type:"elInputTag",
    title:"商品标签",
    field:"tags",
    value: ['热销', '新品'],
    props: {
        max: 5,
        placeholder: "请输入标签，最多5个",
    },
}

可拖拽排序

const rule = {
    type:"elInputTag",
    title:"标签排序",
    field:"tags",
    value: ['标签1', '标签2', '标签3'],
    props: {
        draggable: true,
        placeholder: "可拖拽排序",
    },
}

使用分隔符

const rule = {
    type:"elInputTag",
    title:"关键词",
    field:"keywords",
    value: [],
    props: {
        delimiter: ',',
        placeholder: "使用逗号分隔多个关键词",
    },
}

失去焦点时保存

const rule = {
    type:"elInputTag",
    title:"标签",
    field:"tags",
    value: [],
    props: {
        saveOnBlur: true,
        placeholder: "失去焦点时自动保存",
    },
}

Events 事件示例

监听标签变化

const rule = {
    type:"elInputTag",
    title:"商品标签",
    field:"tags",
    value: [],
    props: {
        placeholder: "请输入标签",
    },
    on: {
        change: (value) => {
            console.log('标签改变:', value);
        },
        'add-tag': (value) => {
            console.log('添加标签:', value);
        },
        'remove-tag': (value) => {
            console.log('移除标签:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
    },
}

标签数量限制提示

const rule = {
    type:"elInputTag",
    title:"商品标签",
    field:"tags",
    value: [],
    props: {
        max: 3,
        placeholder: "最多添加3个标签",
    },
    inject: true,
    on: {
        'add-tag': ($inject, value) => {
            const currentTags = $inject.api.getValue('tags') || [];
            if (currentTags.length >= 3) {
                alert('最多只能添加3个标签！');
                // 移除最后一个标签
                currentTags.pop();
                $inject.api.setValue('tags', currentTags);
            }
        },
    },
}

完整配置项:Element_InputTag

value :Array

Props

名称	详情	类型	默认
max	可添加标签的最大数量	number	—
tagType	标签类型	enum	info
tagEffect	标签效果	enum	light
trigger	触发输入标签的按键	enum	Enter
draggable	是否可以拖动标签	boolean	false
delimiter	在匹配分隔符时添加标签	string / regex	—
size	输入框尺寸	enum	—
saveOnBlur	当输入失去焦点时是否保存输入值	boolean	true
clearable	是否显示清除按钮	boolean	false
disabled	是否禁用	boolean	false
validateEvent	是否触发表单验证	boolean	true
readonly	等价于原生 readonly 属性	boolean	false
autofocus	等价于原生 autofocus 属性	boolean	false
id	等价于原生 input id 属性	string	—
tabindex	等价于原生 tabindex 属性	string / number	—
maxlength	等价于原生 maxlength 属性	string / number	—
minlength	等价于原生 minlength 属性	string / number	—
placeholder	输入框占位文本	string	—
autocomplete	等价于原生 autocomplete 属性	string	off
ariaLabel a11y	等价于原生 aria-label 属性	string	—

Events

名称	详情	类型
change	绑定值变化时触发的事件	Function
input	在 Input 值改变时触发	Function
add-tag	tag 被添加时触发	Function
remove-tag	tag 被移除时触发	Function
focus	在 Input 获得焦点时触发	Function
blur	在 Input 失去焦点时触发	Function
clear	点击清除图标时触发	Function

Slots

名称	详情	类型
tag	作为tag的内容	object
prefix	InputTag 头部内容	—
suffix	InputTag 尾部内容	—