Tag 标签

示例

尺寸

可选的尺寸 ui 属性值：s / m。

Normal

Steve
Tony
Peter
Natasha
Bruce

Small

Steve
Tony
Peter
Natasha
Bruce
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <h4>Normal</h4>
    <veui-tag>Steve</veui-tag>
    <veui-tag type="info">
      Tony
    </veui-tag>
    <veui-tag type="success">
      Peter
    </veui-tag>
    <veui-tag type="warning">
      Natasha
    </veui-tag>
    <veui-tag type="error">
      Bruce
    </veui-tag>
  </section>
  <section>
    <h4>Small</h4>
    <veui-tag ui="s">
      Steve
    </veui-tag>
    <veui-tag
      ui="s"
      type="info"
    >
      Tony
    </veui-tag>
    <veui-tag
      ui="s"
      type="success"
    >
      Peter
    </veui-tag>
    <veui-tag
      ui="s"
      type="warning"
    >
      Natasha
    </veui-tag>
    <veui-tag
      ui="s"
      type="error"
    >
      Bruce
    </veui-tag>
  </section>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.veui-tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

可选择

使用 selectable 属性使标签可以切换选中状态。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-tag selectable>
    Steve
  </veui-tag>
  <veui-tag
    selectable
    type="info"
  >
    Tony
  </veui-tag>
  <veui-tag
    selectable
    type="success"
  >
    Peter
  </veui-tag>
  <veui-tag
    selectable
    type="warning"
  >
    Natasha
  </veui-tag>
  <veui-tag
    selectable
    type="error"
  >
    Bruce
  </veui-tag>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.veui-tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

可移除

使用 removable 属性使标签可以被移除。

Steve
Tony
Peter
Natasha
Bruce
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-tag removable>
    Steve
  </veui-tag>
  <veui-tag
    removable
    type="info"
  >
    Tony
  </veui-tag>
  <veui-tag
    removable
    type="success"
  >
    Peter
  </veui-tag>
  <veui-tag
    removable
    type="warning"
  >
    Natasha
  </veui-tag>
  <veui-tag
    removable
    type="error"
  >
    Bruce
  </veui-tag>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.veui-tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
s小内容尺寸。
m中内容尺寸。
reverse反色样式。
bordered带边框样式。
typestring='default'

标签类型。

值描述
default默认标签。
info信息提示标签。
success成功标签。
warning警告标签。
error错误标签。
selectableboolean=false是否允许选择。
selectedboolean=false

.sync

是否已被选中。

removableboolean=false是否允许删除。
removedboolean=false

.sync

是否已被删除。

disabledboolean=false是否禁用。

插槽

名称描述
default内容区。

事件

名称描述
remove点击删除按钮时触发。

图标

名称描述
remove删除。
在 GitHub 上编辑此页编辑