标签 Tag

标签组件。

重要提示

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

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

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>

标签组

• 结合 pure-tag-group 组件实现标签组单选、多选功能。
• 给 pure-tag-group 绑定 v-model 属性绑定选中项的值，选中项的值为 pure-tag 对应的 text 属性值。
• 如果 v-model 绑定的是字符串或数字，表示单选，数组表示多选。

<template>
    <!-- 多选 -->
    <pure-tag-group class="tags pure-tag-info" v-model="values" checkedClass="pure-tag-danger">
        <pure-tag :text="item.text" v-for="item in options" :key="item.text"></pure-tag>
    </pure-tag-group>

    <!-- 单选 -->
    <pure-tag-group class="tags pure-tag-info" v-model="value" checkedClass="pure-tag-danger">
        <pure-tag :text="item.text" v-for="item in options" :key="item.text"></pure-tag>
    </pure-tag-group>
</template>

<script setup>
    import { ref } from "vue";

    // 标签组选项
    const options = [{ text: "标签1" }, { text: "标签2" }, { text: "标签3" }, { text: "标签4" }, { text: "标签5" }];

    // 多选选中的值
    const values = ref([]);

    // 单选选中的值
    const value = ref("");
</script>

Props

pure-tag-group

属性名	说明	类型	默认值	可选值	版本
modelValue	选中项的值	[Array, Number, String]	[]	-	+1.0.0
async	是否开启异步控制	Boolean	false	true	+1.0.0
asyncFunc	异步控制的处理函数,详见上方说明	Function	undefined	-	+1.0.0
disabledClass	组内所有标签的禁用类名	String	pure-disabled	-	+1.0.0
checkedClass	组内标签选中时的类名	String	-	-	+1.0.0

pure-tag

属性名	说明	类型	默认值	可选值	版本
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

pure-tag-group

事件名	说明	回调参数	版本
change	切换事件	value: 被点击的多选框的值	+1.0.0
asyncChange	异步切换事件	value: 被点击的多选框的值	+1.0.0

pure-tag

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

Slots

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

辅助类

类名	说明	版本
pure-tag-primary	主题-主要	+1.0.0
pure-tag-success	主题-成功	+1.0.0
pure-tag-danger	主题-危险	+1.0.0
pure-tag-warning	主题-警告	+1.0.0
pure-tag-info	主题-信息	+1.0.0
pure-tag-round	圆角标签	+1.0.0
pure-tag-plain	朴素标签	+1.0.0