InputTag 输入标签 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# InputTag 输入标签 3.6.22

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

# 平台差异说明

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

# 基本使用

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

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

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

# 标签在输入框内

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

<u-input-tag v-model="tags" tagInside placeholder="请输入后回车添加" />
✅ Copy success!

# 限制数量

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

<u-input-tag v-model="tags" :max="3" :saveOnBlur="false" placeholder="最多3个可输入" />
✅ Copy success!

# 折叠展示

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

<u-input-tag v-model="tags" collapse-tags :max-collapse-tags="2" :saveOnBlur="false" />
✅ Copy success!

# 禁用

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

<u-input-tag v-model="tags" disabled />
✅ Copy success!

# 按钮确认添加

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

<u-input-tag v-model="tags" confirmButtonText="添加标签" />
✅ Copy success!

# 页面源码地址

页面源码地址

github

gitee

# API

# Props

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

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

# Events

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

# Slots

当前组件无插槽。

← Feedback 全局反馈 SliderButton 滑动按钮 →