Tag 标签

源码位置：components/fui-tag/fui-tag.vue

展示简短的标签文本，可设置类型、主题、边框和点击效果。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 状态标签 -->
<fui-tag text="进行中" type="primary"></fui-tag>

属性

属性	说明	类型	源码默认值
text	标签文字	String	''
type	类型：primary，success，warning，danger，purple	String	'primary'
theme	三种主题：dark、light、plain。background为空时生效	String	'dark'
background	背景色，如果设置背景则type失效	String	''
isBorder	是否显示边框	Boolean	true
borderColor	自定义边框颜色	String	''
color	字体颜色	String	''
size	字体大小 rpx	[Number, String]	24
scaleRatio	缩放比例	Number	1
originLeft	缩放时是否以左侧为基点	Boolean	false
originRight	缩放时是否以右侧为基点	Boolean	false
highlight	是否有点击效果	Boolean	false
radius	圆角大小，单位 rpx	[Number, String]	8
padding	padding值，上右下左，同css顺序	Array	['16rpx', '32rpx']
marginTop	margin-top值	[Number, String]	0
marginBottom	下外边距，单位 rpx	[Number, String]	0
marginLeft	左外边距，单位 rpx	[Number, String]	0
marginRight	右外边距，单位 rpx	[Number, String]	0
index	点击事件携带的索引	Number	0

事件

事件	说明	回调参数
click	点击标签	{ index }

插槽

插槽	说明
default	标签内的自定义内容

平台说明

nvue 与其他平台对边框和类型颜色的处理不同，自定义背景时应同时检查文字和边框颜色。