VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

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 class="tag">
      Steve
    </veui-tag>
    <veui-tag
      class="tag"
      status="info"
    >
      Tony
    </veui-tag>
    <veui-tag
      class="tag"
      status="success"
    >
      Peter
    </veui-tag>
    <veui-tag
      class="tag"
      status="warning"
    >
      Natasha
    </veui-tag>
    <veui-tag
      class="tag"
      status="error"
    >
      Bruce
    </veui-tag>
  </section>
  <section>
    <h4>Small</h4>
    <veui-tag
      class="tag"
      ui="s"
    >
      Steve
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="info"
    >
      Tony
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="success"
    >
      Peter
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="warning"
    >
      Natasha
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="error"
    >
      Bruce
    </veui-tag>
  </section>
</article>
</template>

<script>
import { Tag } from 'veui'

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

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

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

可选择

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

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

<script>
import { Tag } from 'veui'

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

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

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

可移除

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

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

<script>
import { Tag } from 'veui'

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

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

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

预设颜色

使用 color 属性来设置需要使用的预设颜色的名称。

Steve
Tony
Peter
Natasha
Bruce
Clint
Steve
Tony
Peter
Natasha
Bruce
Clint
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-tag color="turquoise">
      Steve
    </veui-tag>
    <veui-tag color="violet">
      Tony
    </veui-tag>
    <veui-tag color="green">
      Peter
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="turquoise"
      removable
    >
      Natasha
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="violet"
      removable
    >
      Bruce
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="green"
      removable
    >
      Clint
    </veui-tag>
  </section>
  <section>
    <veui-tag
      ui="reverse"
      color="turquoise"
    >
      Steve
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="violet"
    >
      Tony
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="green"
    >
      Peter
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="turquoise"
      removable
    >
      Natasha
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="violet"
      removable
    >
      Bruce
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="green"
      removable
    >
      Clint
    </veui-tag>
  </section>
</article>
</template>

<script>
import { Tag } from 'veui'

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

<style lang="less" scoped>
section {
  display: flex;
  gap: 10px;

  & + & {
    margin-top: 20px;
  }
}
</style>

API

属性

名称类型默认值描述
uistring-

预设样式。

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

标签状态。

值描述
default默认标签。
info信息提示标签。
success成功标签。
warning警告标签。
error错误标签。
typestring'default'已废弃。请使用 status 属性代替。
colorstring-预设的彩色标签颜色名。目前支持的有 'turquoise' | 'violet' | 'green'。
selectablebooleanfalse是否允许选择。
selectedbooleanfalse

.sync

是否已被选中。

removablebooleanfalse是否允许删除。
removedbooleanfalse

.sync

是否已被删除。

disabledbooleanfalse是否禁用。

插槽

名称描述
default内容区。

事件

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

图标

名称描述
remove删除。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024