# Tag 标签

概述

Tag 标签,用于标记或分类。

nvue端使用时,需要设置外层flex-direction: row,否则长度将铺满屏幕而非自适应。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiTag from "@/components/firstui/fui-tag/fui-tag.vue"
export default {
	components:{
		fuiTag
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 text 属性设置标签文本,type 属性设置标签类型。

<fui-tag text="标签一"></fui-tag>
<fui-tag text="标签二" type="danger"></fui-tag>
1
2

注意:非nvue端,可通过css变量全局修改按钮type类型对应的颜色,css变量参考 自定义主题

浅色调

通过 theme 属性设置主题,其中 dark(默认值,深色)、light(浅色)、plain(空心)。background 属性为空时生效。

<fui-tag text="标签二" type="danger" theme="light"></fui-tag>
<fui-tag text="标签三" type="success" theme="light"></fui-tag>
1
2
自定义颜色

通过 background 属性设置标签背景颜色,color 属性设置字体颜色。自定义 background 背景颜色后,typetheme 属性失效。

<fui-tag text="标签二" background="#CCCCCC" color="#fff"></fui-tag>
1

# Slots

插槽名称 说明
default 标签内自定义展示内容

# Props

属性名 类型 说明 默认值 平台差异说明
text String 标签显示文本 - -
type String 标签类型,可选值:primary,success,warning,danger,purple primary -
theme String 标签主题,可选值:dark、light、plain。background为空时生效 dark -
background String 标签背景色。如果设置背景则type、theme失效 - -
borderColor String 标签边框颜色 - 非nvue端设置了background值后生效
color String 标签字体颜色 - 非nvue端设置了background值后生效
size Number, String 标签字体大小,单位rpx 24 -
scaleRatio Number 标签缩放比例 1 -
originLeft Boolean 缩放后,是否设置元素的基点位置为:0 center false 仅nvue端生效
originRight Boolean 缩放后,是否设置元素的基点位置为:100% center false 仅nvue端生效
highlight Boolean 是否有点击效果 false -
radius Number, String 标签圆角值,单位rpx 8 -
padding Array padding值,[上,右,下,左],同css顺序 ['16rpx', '32rpx'] -
marginTop Number, String margin-top值 0 -
marginBottom Number, String margin-bottom值 0 -
marginLeft Number, String margin-left值 0 -
marginRight Number, String margin-right值 0 -
index Number 列表中的索引值 0 -

# Events

事件名 说明 回调参数
@click 点击标签时触发 {
  index:索引值
}

示例预览

# 示例代码地址

FirstUITag 标签
Last Updated: 9/29/2022, 1:07:59 AM