Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-tag": "@vant/weapp/tag/index"
  3. }

代码演示

基础用法

通过 type 属性控制标签颜色,默认为灰色。

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

空心样式

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

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

圆角样式

通过 round 设置为圆角样式。

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

标记样式

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

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

自定义颜色

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

标签大小

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

可关闭标签

添加 closeable 属性表示标签是可关闭的,关闭标签时会触发 close 事件,在 close 事件中可以执行隐藏标签的逻辑。

  1. <van-tag
  2. wx:if="{{ show.primary }}"
  3. closeable
  4. size="medium"
  5. type="primary"
  6. id="primary"
  7. bind:close="onClose"
  8. >
  9. 标签
  10. </van-tag>
  11. <van-tag
  12. wx:if="{{ show.success }}"
  13. closeable
  14. size="medium"
  15. type="success"
  16. id="success"
  17. bind:close="onClose"
  18. >
  19. 标签
  20. </van-tag>
  1. Page({
  2. data: {
  3. show: {
  4. primary: true,
  5. success: true,
  6. },
  7. },
  8. onClose(event) {
  9. this.setData({
  10. [`show.${event.target.id}`]: false,
  11. });
  12. },
  13. });

API

Props

参数说明类型默认值版本
type类型,可选值为 primary success danger warningstring--
size大小, 可选值为 large mediumstring--
color标签颜色string--
plain是否为空心样式booleanfalse-
round是否为圆角样式booleanfalse-
mark是否为标记样式booleanfalse-
text-color文本颜色,优先级高于 color 属性stringwhite-
closeable是否为可关闭标签booleanfalse

Slot

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

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类

Tag 标签 - 图1