标签 Tag

引入方式

按需引入（手动）：

import { Vui3Tag } from "@ivui/vue-component-scaffold";
import "@ivui/vue-component-scaffold/es/tag/style.css";

全量导入、自动按需等详见 组件使用方式。

基础用法

简单的标签组件，支持默认插槽或 text prop。

<template>
  <vui3-tag text="默认" />
  <vui3-tag text="主要" type="primary" />
  <vui3-tag text="成功" type="success" />
</template>

<script setup>
import { Vui3Tag } from "@ivui/vue-component-scaffold";
import "@ivui/vue-component-scaffold/es/tag/style.css";
</script>

插槽用法

使用默认插槽自定义内容：

<template>
  <vui3-tag>自定义内容</vui3-tag>
</template>

点击事件

<template>
  <vui3-tag text="可点击" @click="handleClick" />
</template>

<script setup>
import { Vui3Tag } from "@ivui/vue-component-scaffold";
import "@ivui/vue-component-scaffold/es/tag/style.css";

const handleClick = () => {
  console.log("clicked");
};
</script>

API

Props

参数	说明	类型	默认值
text	展示文字	String	''
type	类型	String	'default' | 'primary' | 'success'

Events

事件名	说明
click	点击触发

Slots

插槽名	说明
default	自定义内容，覆盖 text

🔋