Tag 标签

通常用于标记文本，区分状态

基本使用

默认宽高是自适应内容的，边框为0.5像素细边框

<com-tag>火爆</com-tag>

内置不同主题；参照element-ui库的颜色设计

<!-- 蓝色 -->
<com-tag type="info">火爆</com-tag>
<!-- 蓝色 带边框 -->
<com-tag type="info-border">火爆</com-tag>

<!-- 红色 -->
<com-tag type="danger">火爆</com-tag>
<!-- 红色 带边框 -->
<com-tag type="danger-border">火爆</com-tag>

<!-- 绿色 -->
<com-tag type="success">成功</com-tag>
<!-- 绿色 带边框 -->
<com-tag type="success-border">成功</com-tag>

<!-- 橙色 -->
<com-tag type="warning">警告</com-tag>
<!-- 橙色带边框 -->
<com-tag type="warning-border">警告</com-tag>

<!-- 灰色 -->
<com-tag type="gray">警告</com-tag>
<!-- 灰色带边框 -->
<com-tag type="gray-border">警告</com-tag>

设置内边距

<com-tag type="warning" padding="10,30">警告</com-tag>

固定宽高

<com-tag type="warning" width="100" height="50">两字</com-tag>
<com-tag type="warning" width="100" height="50">4个文字</com-tag>

设置圆角

<com-tag type="info" border-radius="5">小圆角</com-tag>
<com-tag type="info" border-radius="20">大圆角</com-tag>
<com-tag type="info" border-radius="0, 10, 0, 10">不规则圆角</com-tag>

红点

<com-tag border-radius="4" padding="8" bgColor="red"></com-tag>
<com-tag padding="2,10" color="#fff" bgColor="red">1</com-tag>
<com-tag padding="2,10" color="#fff" bgColor="red">18</com-tag>
<com-tag padding="2,10" color="#fff" bgColor="red">999+</com-tag>

API

Props

属性名	说明	类型	必填	默认值
type	类型	String	false	-
bgColor	背景颜色	String	false	-
color	字体颜色	String	false	red
fontSize	字体大小	String	false	24
border	显示边框	Boolean	false	true
borderColor	边框颜色	String	false	red
width	宽度	String	false	-
height	高度	String	false	-
circle	是否为圆圈	Boolean	false	false
borderRadius	圆角值;单位为px	String / Number / Array	false	20
padding	内边距; 单位rpx	Array / String	false	[6,20]
customStyle	自定义样式	Object	false	{}