Tag 标记

引入

  1. import{Tag}from'vant';
  2. Vue.use(Tag);

代码演示

基础用法

通过 type 属性控制 Tag 颜色,默认为灰色

  1. <van-tag>标签</van-tag>
  2. <van-tagtype="danger">标签</van-tag>
  3. <van-tagtype="primary">标签</van-tag>
  4. <van-tagtype="success">标签</van-tag>

空心样式

设置plain属性设置为空心样式

  1. <van-tagplain>标签</van-tag>
  2. <van-tagplaintype="danger">标签</van-tag>
  3. <van-tagplaintype="primary">标签</van-tag>
  4. <van-tagplaintype="success">标签</van-tag>

圆角样式

通过round设置为圆角样式

  1. <van-taground>标签</van-tag>
  2. <van-tagroundtype="danger">标签</van-tag>
  3. <van-tagroundtype="primary">标签</van-tag>
  4. <van-tagroundtype="success">标签</van-tag>

标记样式

通过mark设置为标记样式(半圆角)

  1. <van-tagmark>标签</van-tag>
  2. <van-tagmarktype="danger">标签</van-tag>
  3. <van-tagmarktype="primary">标签</van-tag>
  4. <van-tagmarktype="success">标签</van-tag>

自定义颜色

  1. <van-tagcolor="#f2826a">标签</van-tag>
  2. <van-tagcolor="#f2826a"plain>标签</van-tag>
  3. <van-tagcolor="#7232dd">标签</van-tag>
  4. <van-tagcolor="#7232dd"plain>标签</van-tag>
  5. <van-tagcolor="#ffe1e1"text-color="#ad0000">标签</van-tag>

标签大小

  1. <van-tag>标签</van-tag>
  2. <van-tagsize="medium">标签</van-tag>
  3. <van-tagsize="large">标签</van-tag>

API

Props

参数说明类型默认值版本
type类型,可选值为primarysuccessdangerString--
size大小, 可选值为largemediumString-1.3.8
color标签颜色String-1.3.8
plain是否为空心样式Booleanfalse-
round是否为圆角样式Booleanfalse1.3.8
mark是否为标记样式Booleanfalse-
text-color文本颜色,优先级高于color属性Stringwhite1.5.0

Slots

名称说明
default自定义 Tag 显示内容

Events

事件名说明回调参数
click点击时触发-

Tag 标记 - 图1