Tag 标记

使用指南

对状态或类型做标记

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      基础用法
    </p>
    <div class="tag-container">
      <h3-tag>标签</h3-tag>
      <h3-tag type="primary">
        标签
      </h3-tag>
      <h3-tag type="success">
        标签
      </h3-tag>
      <h3-tag type="error">
        标签
      </h3-tag>
      <h3-tag type="warning">
        标签
      </h3-tag>
    </div>
    <p class="sub-title">
      反差标签
    </p>
    <div class="tag-container">
      <h3-tag inverse>
        标签
      </h3-tag>
      <h3-tag inverse type="primary">
        标签
      </h3-tag>
      <h3-tag inverse type="success">
        标签
      </h3-tag>
      <h3-tag inverse type="error">
        标签
      </h3-tag>
      <h3-tag inverse type="warning">
        标签
      </h3-tag>
    </div>
    <p class="sub-title">
      幽灵标签
    </p>
    <div class="tag-container">
      <h3-tag ghost>
        标签
      </h3-tag>
      <h3-tag ghost type="primary">
        标签
      </h3-tag>
      <h3-tag ghost type="success">
        标签
      </h3-tag>
      <h3-tag ghost type="error">
        标签
      </h3-tag>
      <h3-tag ghost type="warning">
        标签
      </h3-tag>
    </div>
    <p class="sub-title">
      圆角标签
    </p>
    <div class="tag-container">
      <h3-tag round>
        标签
      </h3-tag>
      <h3-tag round type="primary">
        标签
      </h3-tag>
      <h3-tag round type="success">
        标签
      </h3-tag>
      <h3-tag round type="error">
        标签
      </h3-tag>
      <h3-tag round type="warning">
        标签
      </h3-tag>
    </div>
    <div class="tag-container">
      <h3-tag round inverse>
        标签
      </h3-tag>
      <h3-tag round inverse type="primary">
        标签
      </h3-tag>
      <h3-tag round inverse type="success">
        标签
      </h3-tag>
      <h3-tag round inverse type="error">
        标签
      </h3-tag>
      <h3-tag round inverse type="warning">
        标签
      </h3-tag>
    </div>
    <div class="tag-container">
      <h3-tag round ghost>
        标签
      </h3-tag>
      <h3-tag round ghost type="primary">
        标签
      </h3-tag>
      <h3-tag round ghost type="success">
        标签
      </h3-tag>
      <h3-tag round ghost type="error">
        标签
      </h3-tag>
      <h3-tag round ghost type="warning">
        标签
      </h3-tag>
    </div>
    <p class="sub-title">
      可关闭标签
    </p>
    <div class="tag-container">
      <h3-tag closable>
        标签
      </h3-tag>
      <h3-tag inverse closable>
        标签
      </h3-tag>
      <h3-tag ghost closable>
        标签
      </h3-tag>
      <h3-tag round closable>
        标签
      </h3-tag>
    </div>
    <div class="tag-container">
      <h3-tag closable type="primary">
        标签
      </h3-tag>
      <h3-tag inverse closable type="primary">
        标签
      </h3-tag>
      <h3-tag ghost closable type="primary">
        标签
      </h3-tag>
      <h3-tag round closable type="primary">
        标签
      </h3-tag>
    </div>
  </div>
</template>

<script>
import H3Tag from '@/components/h3-tag';

export default {
  components: {
    H3Tag,
  },
  methods: {},
};
</script>

<style lang="less">
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .tag-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

根据设计规范重构及新增反差标签样式

若要做迁移请参考

1. 弃用的props：small disabled selected onChange onClose afterClose
2. 替换的props：
3. 新增的props：visible type ghost inverse round closable

API

Prop

属性	说明	类型	默认值
visible	是否呈现，v-model绑定值，默认呈现	boolean	true
type	样式类型 可选值：default | primary | warning | error | success	string	'default'
inverse	反差标签样式，不能与ghost同时使用	boolean	false
ghost	幽灵标签样式，不能与inverse同时使用	boolean	false
round	圆角标签样式	boolean	false
closable	是否可关闭标签	boolean	false

Event

事件名称	说明	回调参数
toggle	v-model绑定事件	(visible：boolean)
show	显示时回调	-
hide	关闭时回调	-
click	点击事件	(evt: event)