Tag标签

常用状态tag标签，提供更多type及模式选择同时支持超长显示ToolTips提示。

基础用法

primary-tagprimary_dark-tagsuccess-taginfo-taginfo_purple-taginfo_lackblue-tagwarning-tagwarning_dark-tagdanger-tagdanger_dark-tag

javascript

<template>
  <ra-tag type="primary">primary-tag</ra-tag>
  <ra-tag type="primary_dark">primary_dark-tag</ra-tag>
  <ra-tag type="success">success-tag</ra-tag>
  <ra-tag type="info">info-tag</ra-tag>
  <ra-tag type="info_purple">info_purple-tag</ra-tag>
  <ra-tag type="info_lackblue">info_lackblue-tag</ra-tag>
  <ra-tag type="warning">warning-tag</ra-tag>
  <ra-tag type="warning_dark">warning_dark-tag</ra-tag>
  <ra-tag type="danger">danger-tag</ra-tag>
  <ra-tag type="danger_dark">danger_dark-tag</ra-tag>
</template>

Dot模式

dot-tagdot-tagdot-tag

javascript

<template>
  <ra-tag type="info" effect="dot">dot-tag</ra-tag>
  <ra-tag type="info_purple" effect="dot">dot-tag</ra-tag>
  <ra-tag type="info_lackblue" effect="dot">dot-tag</ra-tag>
</template>

超长显示省略号

这是一个超长的Tag标签

javascript

<template>
  <ra-tag type="info_purple" :maxWidth="100">这是一个超长的Tag标签</ra-tag>
</template>

插槽

插槽内容

javascript

<template>
  <ra-tag type="primary">插槽内容</ra-tag>
</template>

属性说明

TIP

RaTag基于el-tag组件开发，适用于el-tag的基础属性可自动继承到RaTag组件

Tag属性:

Tag插槽: