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>
    <h3-tag type="warning">
      选项三名称超长测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </h3-tag>

    <p class="sub-title">
      自定义标签
    </p>
    <h3-tag :round="false" bgColor="#F2F2F2" strokeColor="#E8EAF1">
      未开始
    </h3-tag>
    <h3-tag
      :round="false"
      bgColor="#F0F6FF"
      strokeColor="#ADC7FF"
      fontColor="#315EFB"
    >
      已完成
    </h3-tag>

    <p class="sub-title">
      可关闭标签
    </p>
    <div class="tag-container">
      <h3-tag closable>
        选项一
      </h3-tag>
      <h3-tag type="success" closable>
        选项一
      </h3-tag>
      <h3-tag type="error" closable>
        选项一
      </h3-tag>
      <h3-tag type="warning" closable>
        选项一
      </h3-tag>
    </div>

    <p class="sub-title">
      与图片结合（示例）
    </p>
    <h3-tag class="img-tag">
      <h3-image
        class="tag-img"
        :src="imgEg1"
        :width="24"
        :height="24"
        radius="100%"
      />
      张雪
    </h3-tag>
  </div>
</template>

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

export default {
  components: {
    H3Tag,
    H3Image,
  },
  data () {
    return {
      imgEg1: require('../assets/image/dialog.jpg'),
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.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;
    flex-wrap: wrap;
  }
  .img-tag {
    border: none;
    padding-left: 28px;
    .tag-img {
      position: absolute;
      left: 0;
      // transform: translateX(-50%);
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的标签组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：ghost inverse
2. 新增的props: bgColor strokeColor fontColor

API

Prop

属性	说明	类型	默认值
visible	是否呈现，v-model绑定值，默认呈现	boolean	true
type	样式类型 可选值：default | primary | warning | error | success	string	'default'
round	圆角标签样式	boolean	false
closable	是否可关闭标签	boolean	false
bgColor	自定义背景颜色	string	-
strokeColor	自定义描边颜色	string	-
fontColor	自定义字体颜色	string	-

Event

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