@xwink/ui

    TagsInput

    多值输入(域名白名单、关键词、收件人)。回车或分隔符把输入的文字收成一个标签,退格删最后一个,左右方向键在标签间移动、Delete 删掉选中的那个。外观与 XInput 同一个壳(variant、size、校验态),标签多了换行、壳跟着长高。

    白名单与上限
    https://console.xwink.fun
    https://chat.xwink.fun

    回车或逗号收成一个;粘贴多行逗号分隔的会自动拆开

    • v-model 是字符串数组。delimiter 缺省逗号,也可给正则;addOnPaste(缺省开)粘贴时按分隔符拆成多个。
    • addOnBlur(缺省开)失焦时把没收的文字也收进去:填完直接点提交不会丢掉最后一个。
    • duplicate 缺省不允许重复;max 满了输入框不再接收;clearable 加一键清空。

    API

    Props

    名称类型默认值说明
    placeholderstring | undefinedundefined—
    disabledboolean | undefinedfalse—
    maxnumber | undefinedundefined最多几个,满了输入框不再接收
    delimiterstring | RegExp | undefined","输入这个字符就把当前文字收成一个标签,缺省逗号;回车总是收
    addOnPasteboolean | undefinedtrue粘贴时按分隔符拆成多个标签,缺省开
    addOnBlurboolean | undefinedtrue失焦时把没收的文字收成标签,缺省开:填完直接点提交不会丢掉最后一个
    duplicateboolean | undefinedfalse允许重复,缺省不允许
    clearableboolean | undefinedfalse显示一键清空
    ariaLabelstring | undefinedundefined—
    size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
    variantFieldVariant | undefinedundefined—
    modelValuestring[] | undefined[]—

    Emits

    事件载荷说明
    update:modelValue[value: string[]]—