介绍
一个快捷实现tag的组件
API
属性 | |||
---|---|---|---|
属性名 | 说明 | 类型 | 默认值 |
text | 标签文字 | String | ‘’ |
size | 文字大小 | String | 12wx |
bold | 文字是否加粗 | Boolean | false |
icon | 图片(url) | String | ‘’ |
icon-font | 图片(iconFont) | String | ‘’ |
icon-size | 图片大小 | String | 12wx |
image-position | 图片相对文字的位置 可选left/right |
String | left |
space | 图文间距 | String | 2wx |
radius | 圆角 | String | 2wx |
border-width | 边框宽度 | String | 1wx |
border-color | 边框颜色 | String | ‘’ |
padding-top | 上边距 | String | 2wx |
padding-bottom | 下边距 | String | 2wx |
padding-left | 左边距 | String | 2wx |
padding-right | 右边距 | String | 2wx |
text-style | 文本样式,覆盖默认样式 | Object | - |
代码演示
<!--文字标签-->
<fg-tag
text="示例"
:text-color="'#F56161'"
:border-color="'rgba(254, 162, 46, 0.5)'"
/>
<!--图文标签-->
<fg-tag
text="示例"
:text-color="'#FFFFFF'"
:icon-font="'\ue602'"
:icon-color="'#FFFFFF'"
:bg-color="'#4c8dd0'"
border-width="0wx"
/>
<!--图片标签-->
<fg-tag
:icon-font="'\ue602'"
/>