Tag 标签

17:06

说明

用于标记与选择的小标签。内置五种主题色，支持 light / dark / plain 三种模式、square / round / roundLeft / roundRight 四种形状与 default / mini 两档尺寸；closeable 时右侧出现关闭图标并派发 close，disabled 时置灰且不派发点击。文字用 text 传入，也可用默认插槽自定义内容。

兼容性

平台	支持情况
App	⚠️ 部分支持（根节点为 `display: flex`，未放入 flex 容器时标签会独占一行）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

通过 type 参数设置主题类型，默认为 primary。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="primary" type="primary" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="success" type="success" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="warning" type="warning" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="error" type="error" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="info" type="info" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

设置模式 mode

dark(深色背景)、light(浅色背景)、plain(白色背景)。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="深色" mode="dark" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="浅色" mode="light" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="镂空" mode="plain" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

设置形状 shape

square(小圆角 3px，默认)、round(胶囊)、roundLeft(左圆角)、roundRight(右圆角)。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="小圆角" shape="square" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="胶囊" shape="round" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="左圆角" shape="roundLeft" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="右圆角" shape="roundRight" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

设置大小 size

default(默认)、mini(迷你)。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="默认大小" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="迷你大小" size="mini" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

自定义颜色

通过 color、bg-color、border-color 自定义文字、背景和边框颜色。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="自定义文字" color="#ff00ff" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="自定义背景" bg-color="#2979ff" color="#ffffff" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="自定义边框" mode="plain" color="#fa3534" border-color="#fa3534" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

可关闭 closeable

设置 closeable 为 true，点击关闭按钮会触发 close 事件。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="可关闭标签" closeable close-color="#fa3534" :show="show" @close="onClose"></ux-tag>
        <ux-tag text="深色可关闭" closeable mode="dark" :show="show2" @close="onClose2"></ux-tag>
    </view>
</template>

<script setup lang="uts">
const show = ref<boolean>(true);
const show2 = ref<boolean>(true);

function onClose(): void {
    show.value = false;
}

function onClose2(): void {
    show2.value = false;
}
</script>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
</style>

禁用 disabled

设置 disabled 为 true，标签变灰且不可点击。

查看源码

vue

<template>
    <view class="tag-row">
        <ux-tag text="禁用标签" disabled custom-class="tag-spacing"></ux-tag>
        <ux-tag text="禁用深色" disabled mode="dark" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

自定义插槽

通过默认插槽可以自定义标签内容。

查看源码

vue

<template>
    <ux-tag type="success">
        <text style="font-size: 11px; font-weight: bold;">自定义内容</text>
    </ux-tag>
</template>

API

Props

属性	说明	类型	默认值	版本
`customStyle`	自定义根节点样式	`string \| UTSJSONObject`	`-`	-
`customClass`	自定义根节点样式类	`string`	`''`	-
`type`	主题类型，primary、success、info、warning、error	`ThemeType`	`'primary'`	-
`disabled`	是否禁用	`boolean \| string`	`false`	-
`size`	尺寸，default/mini	`TagSize`	`'default'`	-
`shape`	形状：square-小圆角 3px（默认），round-胶囊，roundLeft/roundRight-单侧胶囊	`TagShape`	`'square'`	-
`text`	显示的文本内容	`string \| number`	`''`	-
`color`	文字颜色	`string`	`''`	-
`bgColor`	背景颜色	`string`	`''`	-
`borderColor`	边框颜色	`string`	`''`	-
`closeColor`	关闭按钮颜色	`string`	`''`	-
`mode`	模式，light/dark/plain	`TagMode`	`'light'`	-
`closeable`	是否可关闭	`boolean`	`false`	-
`show`	是否显示	`boolean`	`true`	-

Events

事件名	说明	回调参数	版本
`click`	点击标签触发	`event: UniEvent`	-
`close`	closeable为true时，点击标签关闭按钮触发	`event: UniEvent`	-

Slots

插槽名	说明	版本
`default`	自定义标签内容（默认显示 `text`）	-

注意事项

disabled 时不派发 click 事件（源码在点击入口直接拦截）。
closeable 的关闭图标点击带 .stop，只触发 close，不会同时触发 click。
close 仅通知，不会自动隐藏标签；需自行把 show 置为 false（示例即如此）。
关闭图标颜色优先链：close-color > color > dark 模式白色 > type。
mode="plain" 且未传 border-color 时，边框色取文字色 color。
shape 无真直角档（square 为 3px 小圆角）；需要直角请用 custom-style 内联 border-radius: 0。
App 端根节点为 display: flex（非 inline-flex），单独使用时标签占满一行，多个标签并排需外层 flex 容器包裹。

Tag 标签 ​

说明 ​

兼容性 ​

示例 ​

基础用法 ​

设置模式 mode ​

设置形状 shape ​

设置大小 size ​

自定义颜色 ​

可关闭 closeable ​

禁用 disabled ​

自定义插槽 ​

API ​

Props ​

Events ​

Slots ​

注意事项 ​

Tag 标签

说明

兼容性

示例

基础用法

设置模式 mode

设置形状 shape

设置大小 size

自定义颜色

可关闭 closeable

禁用 disabled

自定义插槽

API

Props

Events

Slots

注意事项