Skip to content

Tag标签

常用tag标签,包含多中状态选择及部分模式样式定制,支持插槽定义内容。

基础用法

default-taggreen-tagyellow-tagorange-tagred-taggray-tagblue-tagpurple-tag
vue
<template>
  <ra-tag color="default">default-tag</ra-tag>
  <ra-tag color="green">green-tag</ra-tag>
  <ra-tag color="yellow">yellow-tag</ra-tag>
  <ra-tag color="orange">orange-tag</ra-tag>
  <ra-tag color="red">red-tag</ra-tag>
  <ra-tag color="gray">gray-tag</ra-tag>
  <ra-tag color="blue">blue-tag</ra-tag>
  <ra-tag color="purple">purple-tag</ra-tag>
</template>

插槽

删除
vue
<template>
  <ra-tag color="red" @click="consol.log('执行删除事件')">
    <el-text>
      <el-icon>
        <Delete />
      </el-icon>
      删除
    </el-text>
  </ra-tag>
</template>

模式及手势

ra-tagra-tagra-tag
vue
<template>
  <ra-tag effect="dark" cursor>ra-tag</ra-tag>
  <ra-tag effect="light">ra-tag</ra-tag>
  <ra-tag effect="dot">ra-tag</ra-tag>
</template>

属性说明

Tag属性:

Tag插槽:

Tag事件:

Released under the MIT License.