vant/docs/examples-docs/tag.md

<style> .tags-container { padding: 5px 15px; .zan-tag + .zan-tag { margin-left: 10px; } } </style>

Tag 标记

使用指南

如果你已经按照快速上手中引入了整个ZanUI，以下组件注册就可以忽略了，因为你已经全局注册了ZanUI中的全部组件。

全局注册

你可以在全局注册Tag组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Tag组件了：

import Vue from 'vue';
import { Tag } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/tag.css';

Vue.component(Tag.name, Tag);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Tag组件，这样只能在你注册的组件中使用Tag：

import { Tag } from '@youzan/zanui-vue';

export default {
  components: {
    'zan-tag': Tag
  }
};

代码演示

基础用法

Tag目前有三种类型，danger、success、primary，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。

:::demo 基础用法

<div class="tags-container">
  <zan-tag>返现</zan-tag>
  <zan-tag plain>返现</zan-tag>
</div>
<div class="tags-container">
  <zan-tag type="danger">返现</zan-tag>
  <zan-tag type="danger">四字标签</zan-tag>
  <zan-tag type="danger">一</zan-tag>
</div>

:::

高级用法

设置plain为true时表示空心的tag，还可以设置mark为true，表示是否为标记。

:::demo 高级用法

<div class="tags-container">
  <zan-tag type="danger">返现</zan-tag>
  <zan-tag plain type="danger">返现</zan-tag>
</div>
<div class="tags-container">
  <zan-tag type="primary">返现</zan-tag>
  <zan-tag plain type="primary">返现</zan-tag>
</div>
<div class="tags-container">
  <zan-tag type="success">返现</zan-tag>
  <zan-tag plain type="success">返现</zan-tag>
</div>
<div class="tags-container">
  <zan-tag type="danger" mark>返现</zan-tag>
</div>

:::

API

参数	说明	类型	默认值	可选值
plain	是否是空心tag	boolean	false
mark	是否是标记	boolean	false
type	tag类型	string	''	primary, success, danger

Slot

name	描述
-	自定义tag显示内容