JLC Docs
PIG
AI
PIG
AI

前端标签列表组件

组件概述

TagList 是一个标签列表组件，支持动态添加和删除标签，适用于多值输入场景，如手机号、邮箱等批量输入。

标签列表组件效果图

基础用法

标签列表组件使用示例 
import { defineAsyncComponent, ref } from 'vue'

const TagList = defineAsyncComponent(
  () => import("/@/components/TagList/index.vue")
);

const phoneList = ref([]);
<tag-list buttonText="+手机号" v-model="phoneList" />
双向绑定

组件通过 v-model 实现双向数据绑定，自动同步标签列表数据。

属性说明

属性类型默认值说明
modelValueArray[String][]双向绑定绑定的标签数组
buttonTextString+ New Tag按钮显示的文本
tagType'success', 'info', 'warning', 'danger'按钮显示类型
本页目录