Vue移动端项目Vant组件库之Tag详解

简介

Tag 是常用的一个标签组件，通常用于列表过滤或者标记。 在 Vant 中，Tag 提供了多种使用场景，包括可关闭标签、标签主题颜色等。本文将详细介绍 Tag 组件的使用方法。

基本用法

Vant 的 Tag 组件提供了两种基本的使用方式：普通标签和可关闭标签。下面分别详细说明：

普通标签

<van-tag>标签</van-tag>

如果需要自定义颜色和边框，可以通过设置 color 和 plain 属性来实现：

<!-- 设置红色 -->
<van-tag color="#f00">标签</van-tag>
<!-- 添加边框 -->
<van-tag plain>标签</van-tag>

可关闭标签

<van-tag
  :closeable="true"
  @close="onTagClose"
>标签</van-tag>

当 closeable 属性为 true 时，标签会添加一个关闭按钮。点击关闭按钮会触发 close 事件。绑定 close 事件可以在方法中处理标签的状态。

以下是一个使用可关闭标签的示例：

<template>
  <div>
    <van-tag
      v-for="(item, index) in tags"
      :key="index"
      :closeable="true"
      @close="onTagClose(index)"
    >
      {{ item }}
    </van-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['标签1', '标签2', '标签3']
    }
  },
  methods: {
    onTagClose(index) {
      this.tags.splice(index, 1);
    }
  }
}
</script>

主题颜色

在 Vant 中，除了默认颜色，还提供了很多主题颜色作为选择。 可以通过 type 属性来设置标签主题颜色，支持 primary、success、danger、warning 四种颜色。

<van-tag type="primary">标签</van-tag>
<van-tag type="success" plain>标签</van-tag>
<van-tag type="danger" color="#f00">标签</van-tag>
<van-tag type="warning" plain closeable>标签</van-tag>

属性

属性	说明	类型	默认值
type	类型，可选值为 primary success danger warning	String	default
plain	是否为空心样式	Boolean	false
color	自定义标签颜色	String	-
round	是否为圆角样式	Boolean	false
size	标签大小，可选值为 large	String	-
closeable	是否为可关闭标签	Boolean	false

事件

事件名	说明	回调参数
click	点击标签时触发	event: Event
close	关闭标签时触发	-

总结

本文详细介绍了 Tag 组件的使用方法，包括普通标签和可关闭标签。同时还介绍了主题颜色，以及 Tag 组件的属性和事件。Tag 是移动端常见的 UI 组件，作为 Vant 整体组件库的一部分，Tag 组件可以更好地完善 Vant 的功能和使用体验。

示例说明

以下是一个使用主题颜色的示例：

<van-tag type="primary">主题颜色</van-tag>
<van-tag type="success">成功</van-tag>
<van-tag type="danger">危险</van-tag>
<van-tag type="warning">警告</van-tag>

此示例将展示四个不同的标签，分别为 primary、success、danger、warning 四种主题颜色的标签。

以下是一个使用 size 属性的示例：

<van-tag size="large">较大的标签</van-tag>

此示例将展示一个较大的标签。