标签组件，用于标记或者选择。

基础示例

通过组件的 label 属性设置标签的文字。

<template>
  <EBlock horizontal wrap class="e-button-showcase">
    <ETag label="tag" />
    <ETag label="标签" />
  </EBlock>
</template>
<style>
.e-button-showcase .e-button {
  margin: 0 8px 8px;
}
</style>

主题颜色

通过组件的 theme 属性设置标签的主题颜色。

<template>
  <EBlock horizontal wrap align="center justify">
    <ETag label="theme" />
    <ETag label="primary" theme="primary" />
    <ETag label="secondary" theme="secondary" />
    <ETag label="success" theme="success" />
    <ETag label="info" theme="info" />
    <ETag label="warn" theme="warn" />
    <ETag label="error" theme="error" />
  </EBlock>
</template>

非镂空标签

通过设置 outline 属性为 false，可以将标签设置为非镂空。支持与 theme 一起使用设置不同主题颜色的非镂空效果。

<template>
  <EBlock horizontal wrap>
    <ETag label="outline=false" :outline="false" />
    <ETag label="theme=primary" theme="primary" :outline="false" />
    <ETag label="theme=secondary" theme="secondary" :outline="false" />
    <ETag label="theme=success" theme="success" :outline="false" />
    <ETag label="theme=info" theme="info" :outline="false" />
    <ETag label="theme=warn" theme="warn" :outline="false" />
    <ETag label="theme=error" theme="error" :outline="false" />
  </EBlock>
</template>
<style>
.e-button {
  margin: 0 8px 8px;
}
</style>

图标标签

设置 icon 属性，icon 列表可以参考 Engage 组件库的 EIcon组件。默认将 Icon 放在按钮的左侧，可以设置 iconRight 属性将 Icon 放在标签右侧。

<template>
  <EBlock horizontal wrap>
    <ETag icon="angle-right" theme="primary" label="icon" />
    <ETag icon="angle-right" icon-right theme="primary" label="iconRight" />
    <ETag icon="angle-right" theme="primary" />
  </EBlock>
</template>

圆角标签

通过设置 round 属性可以将标签设置为圆角。

<template>
  <EBlock horizontal wrap>
    <ETag icon="angle-right" theme="primary" label="icon" round />
    <ETag icon="angle-right" icon-right theme="primary" label="iconRight" round />
    <ETag icon="angle-right" theme="primary" round />
    <ETag theme="primary" label="中" round />
    <ETag theme="primary" label="G" round />
  </EBlock>
</template>

定制化 loading

loading 效果默认为组件库的 ESpinner 进度组件，通过向组件的 loading slot 注入内容支持定制化的 loading 效果。当用户点击标签后，事件处理函数未执行完成前，将会显示 slot 中的内容。

<template>
  <EBlock class="e-button-showcase">
    <EBlock horizontal wrap>
      <ETag :label="clicked?clicked:'click me'" theme="primary" @click="click" />
      <ETag label="loading" width="80" theme="primary" @click="click(1000)" />
      <ETag label="custom loading" theme="primary" @click="click(5000)">
        <ESpinner-audio slot="loading" />
      </ETag>
      <ETag label="multiple @click" width="80" theme="primary" @click="click(1000)" v-on="listeners" />
      <ETag label="disabled" theme="primary" disabled="" @click="click('disabled')" />
    </EBlock>
  </EBlock>
</template>

<script>
export default {
  data() {
    return {
      clicked: 0,
    };
  },
  computed: {
    listeners() {
      return {
        click: () => this.click(2000),
      };
    },
  },
  methods: {
    async click(message) {
      // eslint-disable-next-line no-alert
      if (typeof message === 'string') alert(message);
      else if (typeof message === 'number') {
        await Promise.delay(message);
      } else {
        await Promise.delay(1000);
      }
      this.clicked += 1;

      console.log(this.clicked);
    },
  },
};
</script>

<style>
.e-button-showcase .e-button {
  margin: 0 8px 8px;
}
</style>

标签状态

通过设置 theme 属性为 success、primary、warn、info、error 给标签设置状态。

<template>
  <EBlock horizontal wrap>
    <ETag label="已关注" theme="success" />
    <ETag label="未关注" />
    <ETag label="微信认证" theme="primary" />
    <ETag label="未认证" theme="warn" />
    <ETag label="新建" theme="info" />
    <ETag label="发送失败" theme="error" />
  </EBlock>
</template>

ETag

Props

Name	Description	Type	Required	Default
outline	设置 ETag 的镂空效果	Boolean	false	true