标签 Tag

标签组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 text 属性设置文本内容。

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

图标

• 通过 icon 属性设置图标。

<template>
    <pure-tag text="目标" icon="__mubiao"></pure-tag>
</template>

关闭按钮

• 通过 showClose 设置是否显示关闭按钮。
• 通过 closeIcon 自定义关闭按钮图标。

<template>
    <pure-tag text="目标" icon="__mubiao" showClose closeIcon="__shibai1"></pure-tag>
</template>

主题

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-tag class="pure-tag-primary" text="主要"></pure-tag>
    <pure-tag class="pure-tag-success" text="成功"></pure-tag>
    <pure-tag class="pure-tag-danger" text="危险"></pure-tag>
    <pure-tag class="pure-tag-warning" text="警告"></pure-tag>
    <pure-tag class="pure-tag-info" text="信息"></pure-tag>
</template>

圆角标签

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-tag class="pure-tag-primary pure-tag-round" text="圆角标签"></pure-tag>
</template>

朴素标签

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-tag class="pure-tag-primary pure-tag-plain" text="朴素"></pure-tag>
    <pure-tag class="pure-tag-success pure-tag-plain" text="朴素"></pure-tag>
    <pure-tag class="pure-tag-danger pure-tag-plain" text="朴素"></pure-tag>
    <pure-tag class="pure-tag-warning pure-tag-plain" text="朴素"></pure-tag>
    <pure-tag class="pure-tag-info pure-tag-plain" text="朴素"></pure-tag>
</template>

浅色背景

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-tag class="pure-tag-primary pure-tag-light" text="标签"></pure-tag>
    <pure-tag class="pure-tag-success pure-tag-light" text="标签"></pure-tag>
    <pure-tag class="pure-tag-danger pure-tag-light" text="标签"></pure-tag>
    <pure-tag class="pure-tag-warning pure-tag-light" text="标签"></pure-tag>
    <pure-tag class="pure-tag-info pure-tag-light" text="标签"></pure-tag>
</template>

边框

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-tag class="pure-tag-primary pure-tag-light pure-tag-border" text="标签"></pure-tag>
    <pure-tag class="pure-tag-success pure-tag-light pure-tag-border" text="标签"></pure-tag>
    <pure-tag class="pure-tag-danger pure-tag-light pure-tag-border" text="标签"></pure-tag>
    <pure-tag class="pure-tag-warning pure-tag-light pure-tag-border" text="标签"></pure-tag>
    <pure-tag class="pure-tag-info pure-tag-light pure-tag-border" text="标签"></pure-tag>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
text	标签文本	String	-	-	+1.0.0
icon	图标名称，同图标组件（Icon）的 name 属性，参考	String	undefined	-	+1.0.0
iconMode	图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
showClose	是否显示关闭按钮	Boolean	false	true	+1.0.0
closeIcon	关闭图标名称，同图标组件（Icon）的 name 属性，参考	String	__cuo	-	+1.0.0
closeIconMode	关闭图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0
close	关闭按钮点击事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认（文本内容区域）	-	+1.0.0
icon	图标	-	+1.0.0
close	关闭按钮	-	+1.0.0