标签 Tag

• 一个基础的标签组件
• 支持设置图标
• 支持显示关闭按钮

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-tag

基础使用

通过 text 属性设置显示内容。

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

图标

通过 icon 属性设置图标。

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

关闭

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

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

主题

通过添加辅助类 pure-tag-{主题名称} 即可使用。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

圆角标签

通过添加辅助类 pure-tag-round 即可使用。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

朴素标签

通过添加辅助类 pure-tag-plain 即可使用。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

<view class="pure-tag-primary pure-tag-plain">
    <pure-tag text="朴素"></pure-tag>
</view>

浅色背景

通过添加辅助类 pure-tag-light 即可使用。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

<view class="pure-tag-primary pure-tag-light">
    <pure-tag text="标签"></pure-tag>
</view>

边框

通过添加辅助类 pure-tag-border 即可使用。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

<view class="pure-tag-border">
    <pure-tag text="标签"></pure-tag>
</view>
<view class="pure-tag-primary pure-tag-light pure-tag-border">
    <pure-tag text="标签"></pure-tag>
</view>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	""	-	+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

Event

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

Slots

提示

京东小程序不支持 slot。

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

样式变量

变量名	默认值	版本
--pure-tag-display	inline-flex	+1.0.0
--pure-tag-flex-direction	row	+1.0.0
--pure-tag-align-items	center	+1.0.0
--pure-tag-justify-content	center	+1.0.0
--pure-tag-gap	2px	+1.0.0
--pure-tag-padding	0 10px	+1.0.0
--pure-tag-height	2em	+1.0.0
--pure-tag-line-height	1	+1.0.0
--pure-tag-border-radius	-	+1.0.0
--pure-tag-color	-	+1.0.0
--pure-tag-border-width	-	+1.0.0
--pure-tag-border-style	solid	+1.0.0
--pure-tag-border-color	-	+1.0.0
--pure-tag-overflow	hidden	+1.0.0
--pure-tag-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-tag-background	var(--pure-tag-theme, var(--pure-background-element))	+1.0.0
--pure-tag-background-opacity	-	+1.0.0
--pure-tag-icon-size	-	+1.0.0
--pure-tag-icon-color	-	+1.0.0
--pure-tag-close-size	-	+1.0.0
--pure-tag-close-color	-	+1.0.0
--pure-tag-close-margin	0 0 0 2px	+1.0.0