标签

标签组件。

基础使用

通过 text 属性设置标签显示文本。

<template>
	<pure-tag text="标签文本"></pure-tag>
</template>

主题

通过 theme 属性设置标签主题。

<template>
	<pure-tag text="主要" theme="primary"></pure-tag>
	<pure-tag text="成功" theme="success"></pure-tag>
	<pure-tag text="警告" theme="warning"></pure-tag>
	<pure-tag text="错误" theme="error"></pure-tag>
	<pure-tag text="信息" theme="info"></pure-tag>
</template>

幽灵样式

通过 ghost 属性设置标签幽灵样式。

<template>
	<pure-tag text="主要" ghost theme="primary"></pure-tag>
	<pure-tag text="成功" ghost theme="success"></pure-tag>
	<pure-tag text="警告" ghost theme="warning"></pure-tag>
	<pure-tag text="错误" ghost theme="error"></pure-tag>
	<pure-tag text="信息" ghost theme="info"></pure-tag>
</template>

镂空样式

通过 plain 属性设置标签镂空样式。

<template>
	<pure-tag text="主要" plain theme="primary"></pure-tag>
	<pure-tag text="成功" plain theme="success"></pure-tag>
	<pure-tag text="警告" plain theme="warning"></pure-tag>
	<pure-tag text="错误" plain theme="error"></pure-tag>
	<pure-tag text="信息" plain theme="info"></pure-tag>
</template>

矩形标签

通过 square 属性将标签设置为矩形标签。

<template>
	<pure-tag text="矩形标签" square></pure-tag>
</template>

前置图标

• 通过 iconName 属性设置前置图标。
• 通过 iconOpts 属性设置前置图标配置。

<template>
	<pure-tag text="前置图标" iconName="__loading"></pure-tag>
</template>

可关闭

• 通过 closable 属性设置标签是否可关闭。
• 通过 closeIconName 属性设置关闭图标。
• 通过 closeIconOpts 属性设置关闭图标配置。

<template>
	<pure-tag text="关闭标签" closable></pure-tag>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
text	[String, Number]		文本
theme	String		主题
ghost	Boolean	false	幽灵样式
plain	Boolean	false	镂空样式
iconName	String		前置图标
iconOpts	Object		前置图标配置 参考
closable	Boolean	false	是否可关闭
closeIconName	String		关闭图标
closeIconOpts	Object		关闭图标配置 参考
round	Boolean	false	是否圆角标签
square	Boolean	false	是否矩形标签
radius	String	1000px	圆角大小

事件

名称	参数	说明
onClick		点击事件
onClose		关闭事件

插槽

名称	参数	说明
#icon		前置图标
#default		默认，徽标内容
#close		关闭按钮

样式变量

名称	说明
--pure-tag-padding	内边距
--pure-tag-border-radius	圆角大小
--pure-tag-border-width	边框宽度
--pure-tag-border-style	边框类型
--pure-tag-border-color	边框颜色
--pure-tag-background	背景
--pure-tag-background-opacity	背景透明度
--pure-tag-dot-size	圆点大小
--pure-tag-icon-font-size	前置图标字体大小
--pure-tag-icon-weight	前置图标字体粗细
--pure-tag-icon-color	前置图标字体颜色
--pure-tag-icon-margin	前置图标外边距
--pure-tag-icon-padding	前置图标内边距
--pure-tag-icon-background	前置图标背景
--pure-tag-icon-border-radius	前置图标圆角大小
--pure-tag-icon-border	前置图标边框样式
--pure-tag-close-font-size	关闭图标字体大小
--pure-tag-close-weight	关闭图标字体粗细
--pure-tag-close-color	关闭图标字体颜色
--pure-tag-close-margin	关闭图标外边距
--pure-tag-close-padding	关闭图标内边距
--pure-tag-close-background	关闭图标背景
--pure-tag-close-border-radius	关闭图标圆角大小
--pure-tag-close-border	关闭图标边框样式