InputTag 标签输入框

InputTag 组件允许用户添加内容作为标签

基础用法

按Enter回车键添加输入内容为标签

export function InputTagBasic() {  const [input, setInput] = useState<string[]>();  return (    <ElInputTag      value={input}      onChange={setInput}      placeholder="Please input"      ariaLabel="Please click the Enter key after input"    />  );}

自定义触发器

您可以自定义用于触发输入标签的键位，默认是Enter 回车键

Enter

Space

export function InputTagTrigger() {  const [trigger, setTrigger] = useState<"Enter" | "Space">("Space");  const [input, setInput] = useState<string[]>();  return (    <>      <div>        <ElSegmented          value={trigger}          onChange={(next) => setTrigger(next as "Enter" | "Space")}          options={["Enter", "Space"]}        />      </div>      <br />      <ElInputTag        value={input}        onChange={setInput}        trigger={trigger}        placeholder="Please input"      />    </>  );}

最大标签数

您可以设置可以添加的标签数量限制。

export function InputTagMax() {  const [input, setInput] = useState<string[]>();  return (    <ElInputTag      value={input}      onChange={setInput}      max={3}      placeholder="enter up to 3 tags"    />  );}

折叠标签2.11.0

使用折叠标签属性将它们合并成一块文本。您可以使用折叠标签工具提示属性来启用悬停在折叠文本上的行为来显示特定的选定值。使用折叠标签工具提示属性会使最大属性无效。

use collapse-tags

use collapse-tags-tooltip

use max-collapse-tags

export function InputTagCollapse() {  const [input1, setInput1] = useState<string[]>();  const [input2, setInput2] = useState<string[]>();  const [input3, setInput3] = useState<string[]>();  return (    <div style={{ margin: 16 }}>      <p>use collapse-tags</p>      <ElInputTag        value={input1}        onChange={setInput1}        collapseTags        placeholder="Please input"        ariaLabel="Please click the Enter key after input"      />      <p>use collapse-tags-tooltip</p>      <ElInputTag        value={input2}        onChange={setInput2}        collapseTags        collapseTagsTooltip        placeholder="Please input"        ariaLabel="Please click the Enter key after input"      />      <p>use max-collapse-tags</p>      <ElInputTag        value={input3}        onChange={setInput3}        collapseTags        collapseTagsTooltip        maxCollapseTags={3}        placeholder="Please input"        ariaLabel="Please click the Enter key after input"      />    </div>  );}

禁用状态

您可以设置 InputTag 被禁用。

tag1tag2tag3

export function InputTagDisabled() {  const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]);  return (    <ElInputTag      value={input}      onChange={setInput}      disabled      placeholder="Please input"    />  );}

可清空

您可以设置是否显示清除按钮。

tag1tag2tag3

export function InputTagClearable() {  const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]);  return (    <ElInputTag      value={input}      onChange={setInput}      clearable      placeholder="Please input"    />  );}

自定义清除图标2.11.0

你可以通过clear-icon属性自定义清除图标

customclearicon

export function InputTagClearIcon() {  const [input, setInput] = useState<string[] | undefined>(["custom", "clear", "icon"]);  return (    <ElInputTag      value={input}      onChange={setInput}      clearable      clearIcon={<CloseBold />}      placeholder="Custom clear icon"    />  );}

可拖放

您可以设置是否可以拖动标签。

tag1tag2tag3

export function InputTagDraggable() {  const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]);  return (    <ElInputTag      value={input}      onChange={setInput}      draggable      placeholder="Please input"    />  );}

分隔符2.9.9

当一个分隔符匹配时，您可以添加一个标签。

export function InputTagDelimiter() {  const [input, setInput] = useState<string[] | undefined>([]);  return (    <ElInputTag      value={input}      onChange={setInput}      draggable      placeholder="Try to separate words with ,"      delimiter=","    />  );}

尺寸

使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项： large, small。

export function InputTagSize() {  const [input, setInput] = useState<string[]>();  return (    <>      <ElInputTag        value={input}        onChange={setInput}        size="large"        placeholder="Please input"      />      <br />      <ElInputTag value={input} onChange={setInput} placeholder="Please input" />      <br />      <ElInputTag        value={input}        onChange={setInput}        size={"small" as ComponentSize}        placeholder="Please input"      />    </>  );}

自定义标签

您可以通过tag插槽自定义标签内容。

export function InputTagCustomTag() {  const [tagType, setTagType] = useState<TagType>("primary");  const [tagEffect, setTagEffect] = useState<TagEffect>("plain");  const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]);  return (    <>      <div>        <ElSegmented          value={tagType}          onChange={(next) => setTagType(next as TagType)}          options={["primary", "success", "info", "warning", "danger"]}          style={marginRight20}        />        <ElSegmented          value={tagEffect}          onChange={(next) => setTagEffect(next as TagEffect)}          options={["light", "dark", "plain"]}        />      </div>      <br />      <ElInputTag        value={input}        onChange={setInput}        tagType={tagType}        tagEffect={tagEffect}        placeholder="Please input"      >        {(value) => (          <div style={iconRow}>            <ElIcon style={{ marginRight: 4 }}>              <ElementPlus />            </ElIcon>            <span>{value}</span>          </div>        )}      </ElInputTag>    </>  );}

自定义前缀和后缀

您可以通过prefix和 suffix 插槽自定义 InputTag 的前缀和后缀。

export function InputTagPrefixSuffix() {  const [input, setInput] = useState<string[]>();  return (    <ElInputTag      value={input}      onChange={setInput}      clearable      placeholder="Please input"      prefix={        <ElIcon>          <ElementPlus />        </ElIcon>      }      suffix={        <ElIcon>          <Search />        </ElIcon>      }    />  );}

InputTag API

InputTag Attributes

属性名	说明	类型	默认值
value	绑定值	`array`	—
max	最多可输入的标签数	`number`	—
tag-type	标签类型	`enum`	info
tag-effect	标签主题	`enum`	light
effect	折叠提示浮层的主题	`enum` / `string`	light
trigger	触发新增标签的按键	`enum`	Enter
draggable	标签是否可拖拽	`boolean`	false
delimiter	匹配到分隔符即创建标签	`string` / `regex`	—
size	输入框尺寸	`enum`	—
collapse-tags	是否折叠多余标签	`boolean`	false
collapse-tags-tooltip	折叠时悬停展示全部标签，开启后 max 失效	`boolean`	false
max-collapse-tags	折叠时保留的标签数	`number`	1
save-on-blur	失焦时是否保存输入内容为标签	`boolean`	true
clearable	是否显示清空按钮	`boolean`	false
clear-icon	自定义清空图标	`ReactNode`	CircleClose
disabled	是否禁用	`boolean`	false
validate-event	是否触发表单校验	`boolean`	true
readonly	原生只读	`boolean`	false
autofocus	原生自动聚焦	`boolean`	false
id	原生 id	`string`	—
tabindex	原生 tabindex	`string` / `number`	0
maxlength	原生 maxlength	`string` / `number`	—
minlength	原生 minlength	`string` / `number`	—
placeholder	占位文本	`string`	—
autocomplete	原生 autocomplete	`string`	off
aria-label	原生 aria-label	`string`	—
class-name / style	根元素类名与样式	`string` / `object`	—

InputTag Events

事件名	说明	参数
onChange	绑定值变化（对应官方 v-model / change）	`Function`
onInput	输入框文本变化	`Function`
onAddTag	新增标签	`Function`
onRemoveTag	移除标签	`Function`
onDragTag	拖拽结束改变顺序	`Function`
onFocus / onBlur	聚焦 / 失焦	`Function`
onClear	点击清空图标	`Function`

InputTag Slots

名称	说明	类型
prefix	输入框前缀内容	`ReactNode`
suffix	输入框后缀内容	`ReactNode`
children	标签内容，传函数时等价官方 tag 作用域插槽	`ReactNode` / `Function`

InputTag Exposes

名称	说明	类型
focus	聚焦输入框	`Function`
blur	失焦输入框	`Function`