TnTag-标签

tag 组件一般用于标记和选择

组件位置

nodeuni_modules

typescript

import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'

import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'

typescript

import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'

import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'

标签type值可以修改标签的主题颜色
标签size值可以修改标签的尺寸

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基本使用

通过slot插槽来设置标签的内容

vue

<TnTag>标签</TnTag>

<TnTag>标签</TnTag>

设置标签样式

type值可选的有primary、success、warning、danger、info，默认为空，即默认标签
通过shape设置标签的形状，可选值：circle、round、circleLeft、circleRight
通过bold设置标签的字体是否加粗
通过font-size设置标签的字体大小
通过bg-color设置标签背景颜色
通过text-color设置标签字体颜色
通过border设置是否显示标签边框
通过border-color设置标签边框颜色，默认border为true
通过size设置标签的大小，可选值为sm、lg、xl，默认为空，即默认标签
通过width设置标签的宽度，默认单位为 rpx，可以传递带单位的字符串
通过height设置标签的高度，默认单位为 rpx，可以传递带单位的字符串

vue

<TnTag type="primary">标签</TnTag>
<TnTag type="success">标签</TnTag>
<TnTag type="warning">标签</TnTag>
<TnTag type="danger">标签</TnTag>
<TnTag type="info">标签</TnTag>

<TnTag type="primary">标签</TnTag>
<TnTag type="success">标签</TnTag>
<TnTag type="warning">标签</TnTag>
<TnTag type="danger">标签</TnTag>
<TnTag type="info">标签</TnTag>

vue

<TnTag bg-color="tn-blue">标签</TnTag>
<TnTag bg-color="gradient__cool-1">标签</TnTag>
<TnTag bg-color="#01beff">标签</TnTag>
<TnTag bg-color="rgb(1, 190, 255)">标签</TnTag>

<TnTag bg-color="tn-blue">标签</TnTag>
<TnTag bg-color="gradient__cool-1">标签</TnTag>
<TnTag bg-color="#01beff">标签</TnTag>
<TnTag bg-color="rgb(1, 190, 255)">标签</TnTag>

vue

<TnTag text-color="tn-blue">标签</TnTag>
<TnTag text-color="#01beff">标签</TnTag>
<TnTag text-color="rgb(1, 190, 255)">标签</TnTag>

<TnTag text-color="tn-blue">标签</TnTag>
<TnTag text-color="#01beff">标签</TnTag>
<TnTag text-color="rgb(1, 190, 255)">标签</TnTag>

vue

<TnTag border>开启边框</TnTag>
<TnTag border-color="#01beff">设置颜色默认开启边框</TnTag>
<TnTag border-color="rgb(1, 190, 255)">标签</TnTag>

<TnTag border>开启边框</TnTag>
<TnTag border-color="#01beff">设置颜色默认开启边框</TnTag>
<TnTag border-color="rgb(1, 190, 255)">标签</TnTag>

vue

<TnTag shape="circle">标签圆形</TnTag>
<TnTag type="primary" shape="round">标签圆角</TnTag>
<TnTag type="primary" shape="circleLeft">标签左边圆形</TnTag>
<TnTag type="primary" shape="circleRight">标签右边圆形</TnTag>

<TnTag shape="circle">标签圆形</TnTag>
<TnTag type="primary" shape="round">标签圆角</TnTag>
<TnTag type="primary" shape="circleLeft">标签左边圆形</TnTag>
<TnTag type="primary" shape="circleRight">标签右边圆形</TnTag>

vue

<TnTag size="sm">标签</TnTag>
<TnTag size="lg">标签</TnTag>
<TnTag size="xl">标签</TnTag>
<TnTag width="100" height="80">标签</TnTag>
<TnTag width="100px" height="80px">标签</TnTag>

<TnTag size="sm">标签</TnTag>
<TnTag size="lg">标签</TnTag>
<TnTag size="xl">标签</TnTag>
<TnTag width="100" height="80">标签</TnTag>
<TnTag width="100px" height="80px">标签</TnTag>

使用外部定义的样式

组件提供了一个custom-class和custom-style参数，可以用来给组件定义类名或者嵌入内联样式，这样就可以修改标签的样式了。自定义样式的时候需要注意驼峰命名法，比如font-size需要写成fontSize。

vue

<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnTag custom-class="my-tag" :custom-style="style">标签</TnTag>
</template>

<style lang="scss" scoped></style>

<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnTag custom-class="my-tag" :custom-style="style">标签</TnTag>
</template>

<style lang="scss" scoped></style>

API

Props

属性名	说明	类型	默认值	可选值
width	标签宽度，默认单位为 rpx，可以传入带单位的尺寸值	String \| Number	-	-
height	标签高度，默认单位为 rpx，可以传入带单位的尺寸值	String \| Number	-	-
size	标签尺寸	String	-	`sm` / `lg` / `xl`
shape	标签形状	String	-	`circle` / `round` / `text`
type	标签颜色类型，设置标签颜色为主题色	String	-	`primary` / `success` / `warning` / `danger` / `info`
bold	是否加粗字体	Boolean	`false`	`true`
font-size	字体大小，默认单位为 rpx，可以传入带单位的尺寸值	String	-	-
bg-color	标签背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
text-color	文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
border	是否显示边框	Boolean	`false`	`true`
border-bold	是否加粗边框，在`border`为`true`时有效	Boolean	`false`	`true`
border-color	边框颜色，在`border`为`true`时有效，支持图鸟内置的边框颜色、hex、rgb、rgba	String	-	-
custom-style	在外部自定义组件样式	CSSProperties	{}	-
custom-class	在外部作用于组件的类	String	-	-

Emits

事件名	说明	类型
click	标签点击事件	`() => void`

Slots

插槽名	说明
default	标签内容

TnTag-标签 ​

组件位置 ​

平台差异说明 ​

基本使用 ​

设置标签样式 ​

使用外部定义的样式 ​

API ​

Props ​

Emits ​

Slots ​