点我扫二维码，查看demo

# Tag 标签组件

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Tag } from '@dolphin-iot/ui'

Vue.use(Tag);

1
2
3
4

# 代码演示

# 基础用法

<mx-tag>标签</mx-tag>

# 空心样式

通过 plain参数控制是否显示为空心。plain 默认为 false。

<mx-tag :plain="true">标签</mx-tag>

# 矩形样式

通过 round 参数控制是否显示为圆角。round 默认为 true。

<mx-tag :round="false">标签</mx-tag>

# 标记样式

通过 mark 参数控制是否显示为标记样式。mark 默认为 false。

<mx-tag :mark="true">标签</mx-tag>

# 主题颜色

通过 theme 参数控制标签的主题颜色，标签支持 brand gray purple blue-purple blue cyan yellow orange orange-red gray-offline 十种主题颜色。theme 默认为 brand。

<mx-tag>标签</mx-tag>
<mx-tag theme="gray">标签</mx-tag>
<mx-tag theme="purple">标签</mx-tag>
<mx-tag theme="cyan">标签</mx-tag>
<mx-tag theme="yellow">标签</mx-tag>
<mx-tag theme="purple">标签</mx-tag>

1
2
3
4
5
6

# 标签文本加粗

通过font-weight属性设置标签文本加粗；支持string number两种类型的值。

<mx-tag font-weight="bolder" slot="suffix">标签</mx-tag>
<mx-tag :font-weight="800" slot="suffix">标签</mx-tag>

1
2

# 自定义颜色

通过 color text-color 参数可以背景色以及文本颜色。

<mx-tag color="#25cf42">标签</mx-tag>
<mx-tag color="#25cf42" text-color="#ff3b30">标签</mx-tag>
<mx-tag color="#25cf42" :plain="true">标签</mx-tag>

1
2
3

# Api

# Props

参数	说明	类型	默认值	是否必须
theme	颜色主题，可选值为: `brand` `gray` `purple` `blue-purple` `blue` `cyan` `yellow` `orange` `orange-red` `gray-offline`	string	`brand`	`-`
size	标签尺寸，可选值为：`middle`	string	`middle`	`-`
round	是否显示为圆角	boolean	`true`	`-`
plain	是否显示为空心	boolean	`false`	`-`
mark	是否显示为标记	boolean	`false`	`-`
color	自定义标签颜色	string	`-`	`-`
text-color	自定义标签文本颜色	string[]	`600`	`-`
font-weight	标签文本加粗	string \| number	`normal`	`-`

# Slots

名称	说明
default	标签内容

← Swiper 轮播 List 列表 →