Skip to content

TagInput 标签输入框

规则

基础示例

js
const rule = {
    type:"tagInput",
    title:"标签",
    field:"tagInput",
    value: [],
    props: {
        clearable: true,
    },
}

Props 配置示例

限制标签数量

js
const rule = {
    type:"tagInput",
    title:"商品标签",
    field:"tags",
    value: [],
    props: {
        max: 5,
        placeholder: "请输入标签,按回车确认",
        clearable: true,
    }
}

禁用状态

js
const rule = {
    type:"tagInput",
    title:"标签",
    field:"tags",
    value: ["热销", "新品"],
    props: {
        disabled: true,
    }
}

Events 事件示例

监听标签变化

js
const rule = {
    type:"tagInput",
    title:"商品标签",
    field:"tags",
    value: [],
    props: {
        placeholder: "请输入标签",
        clearable: true,
    },
    on: {
        change: (value, context) => {
            console.log('标签改变:', value, context);
        },
        enter: (value, context) => {
            console.log('按下回车:', value, context);
        },
    },
}

完整配置项:TDesign_Tag_Input

value :Array

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用