Tag 标签

常用于标记。

基础用法

设置 type 可展示不同类型的样式。设置 text 和默认插槽都可以设置标签内容。

查看代码

<template>
	<demo-container>
		<gov-tag> 默认 </gov-tag>
		<gov-tag type="primary"> 主要 </gov-tag>
		<gov-tag type="success"> 成功 </gov-tag>
		<gov-tag type="info"> 信息 </gov-tag>
		<gov-tag type="warning"> 警告 </gov-tag>
		<gov-tag type="danger"> 危险 </gov-tag>
		<hr />
		<gov-tag text="默认" round />
		<gov-tag text="主要" round type="primary" />
		<gov-tag text="成功" round type="success" />
		<gov-tag text="信息" round type="info" />
		<gov-tag text="警告" round type="warning" />
		<gov-tag text="危险" round type="danger" />
		<hr />
		<gov-tag text="默认" round fill />
		<gov-tag text="主要" round fill type="primary" />
		<gov-tag text="成功" round fill type="success" />
		<gov-tag text="信息" round fill type="info" />
		<gov-tag text="警告" round fill type="warning" />
		<gov-tag text="危险" round fill type="danger" />
	</demo-container>
</template>

关闭按钮

标签提供关闭按钮和关闭事件。

控制台

关闭按钮触发：0次

查看代码

<template>
	<demo-container >
		<gov-tag type="primary" closable @close="value += 1"> 主要 </gov-tag>
		<template #console>关闭按钮触发：{{ value }}次</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(0);
</script>

不同尺寸

查看代码

<template>
	<demo-container>
		<gov-tag type="primary" size="large"> large </gov-tag>
		<gov-tag type="primary"> default </gov-tag>
		<gov-tag type="primary" size="small"> small </gov-tag>
	</demo-container>
</template>

设置图标

查看代码

<template>
	<demo-container >
		<gov-tag type="danger" closable icon="s-flag"> 定个小目标 </gov-tag>
		<gov-tag type="info" closable icon="phone"> 0376-9765283 </gov-tag>
		<gov-tag type="warning" icon="no-smoking"> 禁止吸烟 </gov-tag>
		<gov-tag type="primary" icon="male"> 男 </gov-tag>
		<gov-tag type="success" icon="female"> 女 </gov-tag>
	</demo-container>
</template>

<script setup></script>

Attributes

属性名	说明	类型	可选值	默认值
type	标签类型	String	default, primary, success, info, warning, danger	default
icon	图标名称	String	—	—
closable	是否可关闭	Boolean	true, false	false
round	是否为圆角	Boolean	true, false	false
fill	是否填充	Boolean	true, false	false
text	标签文本	String	—	—
size	标签尺寸	String	—	—

Events

事件名	说明
close	关闭事件。

Slots

插槽名	说明	内容
icon	用于自定义图标	可以放置自定义图标组件或图片。
default	用于自定义标签文本内容	可以放置自定义文本或 HTML 结构。