标签输入框 InputTag

对应 Arco InputTag：灰底输入框内的默认标签为浅色描边。 属性用法见 Element Plus 文档。

基础与禁用

输入英文内容后按 Enter 添加标签；disabled 禁止编辑。

VueArco

VueArco

<script setup lang="ts">
import { ref } from 'vue'
const tags = ref(['Vue', 'Arco'])
</script>

<template>
  <el-input-tag v-model="tags" placeholder="Add a tag" style="width: 320px" />
  <el-input-tag :model-value="['Vue', 'Arco']" disabled style="width: 320px" />
</template>

标签样式

tag-type 和 tag-effect 在 Arco 中没有对应项，按主题的 Tag 风格延伸。

VueArco

VueArco

<script setup lang="ts">
import { ref } from 'vue'
const primary = ref(['Vue', 'Arco'])
const dark = ref(['Vue', 'Arco'])
</script>

<template>
  <el-input-tag v-model="primary" tag-type="primary" style="width: 320px" />
  <el-input-tag v-model="dark" tag-effect="dark" style="width: 320px" />
</template>

与 Arco 的差异

• 关闭图标使用 Element Plus 图标；tag-type 和 tag-effect 是 Arco 没有的配置。