---
title: TagInput 标签输入框
description: 用于输入文本标签。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

通过`value`，`defaultValue`，`v-model`来设置他的值，**value：** 该方式赋值会导致组件不可操作，**defaultValue：** 通过该
方式赋值为默认值，并不会印象操作和绑值，**v-model：** 通过该方式赋值为响应式，通过`inputValue`可设置输入框的值，此属性谨
慎使用，一旦设置后期不可更改，推荐使用`defaultInputValue`替代。

> 提示：输入完成之后通过回车键完成操作。

{{ base }}

## 前后容器

通过`label`可设置左侧的文本信息，通过`suffixIcon`可设置右侧的图标，通过`suffix`可设置右侧图标前面的内容。

{{ prefixSuffix }}

## 自定义标签

除了使用默认的标签`l-tag`之外，还可以通过`tag`来自定义标签的样式，或者通过`tagProps`来定义。

{{ tag }}

## 自动宽度

类似输入框的自动宽度，会根据内容自动撑开，通过`autowidth`属性进行设置

{{ autowidth }}

## 快捷清空

通过`clearable`属性可设置右侧的快捷清空图标。

{{ clearable }}

## 值展示

当输入的标签个数过多容纳不下的时候，就需要对输入的值进行处理，通过`excessTagsDisplayType`可设置超出之后的处理方式，可选
：`break-line`，`scroll`，

{{ wrap }}

## 折叠

当值过长的时候通过上面的方式处理有时候可能会影响页面的布局，这时候就可以通过`minCollapsedNum`来定义超出当前值之后就显示
更多，而更多的样式一般都是`+N`，可以通过`collapsedItems`来自定义。

{{ collapse }}

## 最大标签个数

通过`max`可限制最大可输入的标签个数

{{ max }}

## 拖拽排序

通过开启`dragSort`属性，可让已输入的标签能够进行拖拽排序。

{{ drag }}

## 不同大小

通过`size`可设置不同大小的标签输入框，可选：`small`，`medium`，`large`，默认为：`medium`。

{{ size }}

## 不同状态

通过`status`可设置不同状态，可选：`default`，`success`，`warning`，`error`，默认为：`default`，通过`tips`还可以设置提示
信息。

{{ status }}

## 不同主题

通过 `tagProps` 可以设置标签的所有属性，如：颜色设置。

{{ theme }}

## 禁用 && 只读

通过 `disabled` 及 `readonly` 可以设置标签输入框的禁用或只读状态。

{{ disabled }}
