标签 tag 待优化 待新增功能

简单的标签

使用说明

简单引入

我是标签

展开代码

<vi-tag>我是标签</vi-tag>

颜色

通过修改color属性定义不同的tag颜色

我是标签我是标签我是标签我是标签我是标签我是标签我是标签

展开代码

<vi-tag>我是标签</vi-tag>
<vi-tag color="purple">我是标签</vi-tag>
<vi-tag color="pink">我是标签</vi-tag>
<vi-tag color="red">我是标签</vi-tag>
<vi-tag color="yellow">我是标签</vi-tag>
<vi-tag color="green">我是标签</vi-tag>
<vi-tag color="blue">我是标签</vi-tag>

与button类似，使用mutate属性让tag样式变异

我是标签我是标签我是标签我是标签我是标签我是标签我是标签

展开代码

<vi-tag mutate>我是标签</vi-tag>
<vi-tag mutate color="purple">我是标签</vi-tag>
<vi-tag mutate color="pink">我是标签</vi-tag>
<vi-tag mutate color="red">我是标签</vi-tag>
<vi-tag mutate color="yellow">我是标签</vi-tag>
<vi-tag mutate color="green">我是标签</vi-tag>
<vi-tag mutate color="blue">我是标签</vi-tag>

尺寸

有三种尺寸的tag使用，通过size属性定义

标签标签标签

展开代码

<vi-tag size="big">标签</vi-tag>
<vi-tag>标签</vi-tag>
<vi-tag size="small">标签</vi-tag>

使用max属性，使标签padding变大

这是max标签这是max标签这是max标签

展开代码

<vi-tag max size="big">这是max标签</vi-tag>
<vi-tag max>这是max标签</vi-tag>
<vi-tag max size="small">这是max标签</vi-tag>

标签嵌套

标签可以嵌套使用

今日访客 99+ 待完成 5

展开代码

<vi-tag>
  今日访客
  <vi-tag color="red" size="small">99+</vi-tag>
</vi-tag>
<vi-tag size="small">
  待完成
  <vi-tag color="green" size="small">5</vi-tag>
</vi-tag>

Props

属性名	描述	类型	默认值

插槽

插槽名	描述	有无默认内容