用于在输入框中快速录入多个标签项，支持折叠展示、最大数量限制、禁用、内嵌标签等能力，移动端友好。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

基本使用

最基础的多标签录入，回车确认或点击确认按钮添加。

<template>
  <view>
    <un-input-tag v-model="tags" placeholder="请输入后回车添加" />
  </view>
  
</template>

<script>
export default {
  data() {
    return {
      tags: ['服饰鞋包','美妆护肤']
    }
  }
}
</script>

标签在输入框内

将标签内嵌到输入框容器内，视觉更加紧凑。常与自动保存配合使用。

<un-input-tag v-model="tags" tagInside placeholder="请输入后回车添加" />

限制数量

通过 max 限制可添加的标签数量；通过 saveOnBlur 控制失焦是否自动保存。

<un-input-tag v-model="tags" :max="3" :saveOnBlur="false" placeholder="最多3个可输入" />

折叠展示

当标签较多时可折叠，只展示前若干项，其余以 “+N” 形式展示。

<un-input-tag v-model="tags" collapse-tags :max-collapse-tags="2" :saveOnBlur="false" />

禁用

禁用后不可新增或删除标签。

<un-input-tag v-model="tags" disabled />

按钮确认添加

默认会显示右侧确认按钮（外置模式下）。可通过 confirmButtonText 修改文案，或通过 showConfirmButton=false 关闭，仅回车添加。

<un-input-tag v-model="tags" confirmButtonText="添加标签" />

页面源码地址

页面源码地址

 github  gitee

API

Props

参数	说明	类型	默认值
v-model	绑定的标签数组	Array	[]
placeholder	输入框占位符	String	请输入内容，回车添加
max	最大可添加数量	Number | String	-
collapseTags	是否折叠展示	Boolean	false
maxCollapseTags	折叠时最多展示的标签数量	Number | String	1
inputStyle	输入框自定义样式	Object | String	-
placeholderStyle	占位符样式	Object | String	-
disabled	是否禁用	Boolean	false
showConfirmButton	是否显示右侧确认按钮（外置模式）	Boolean	true
confirmButtonText	确认按钮文案（为空则不显示按钮）	String	添加标签
saveOnBlur	失焦时是否保存（tagInside 或隐藏按钮时更常用）	Boolean	true
tagBgColor	标签背景色（支持内置色值或自定义色）	String	-
tagInside	标签是否内嵌到输入区域	Boolean	false
tagColor	标签字体颜色（不传则按背景自适应）	String	-
plain	是否镂空标签	Boolean	false
shape	标签形状	Enum	square
bgColor	容器背景色（内嵌与外置模式均可用）	String	-
round	容器圆角	Number | String	5

颜色说明：tagBgColor 支持 uView next预设色（如 primary、warning）或十六进制 / rgb / rgba 自定义色；当使用自定义浅色时，tagColor 建议指定为深色以增强可读性。

Events

事件名	说明	回调参数
change	标签集合变更时触发	Array 当前标签数组
addTag	新增标签时触发	String 新增的标签值
removeTag	移除标签时触发	String 被移除的标签值

Slots

当前组件无插槽。