pro-el-components

Appearance

StatusText 状态文本组件 ​

用于显示状态信息的文本组件，支持多种显示模式和动画效果。

使用方法 ​

基础用法
准备状态
成功状态
错误状态
警告状态
尺寸
小尺寸
默认尺寸
大尺寸
线状效果
线状成功
线状错误
线状警告
填充效果
填充成功
填充错误
填充警告
胶囊样式
成功
警告
错误
渐变效果
渐变成功
渐变错误
渐变警告
发光效果
发光处理中
发光成功
动画效果
脉冲动画
波浪动画

API ​

属性名类型默认值说明
statusstring'ready'状态类型
textstring-显示文本
colorsobject状态颜色配置，支持单色或渐变色数组
size'small' | 'default' | 'large''default'组件尺寸
mode'dot' | 'line' | 'filled' | 'pill' | 'glow' | 'gradient''dot'显示模式
animation'none' | 'pulse' | 'blink' | 'wave' | 'shine''none'动画效果
elevatedbooleanfalse是否启用立体效果
customClassstring-自定义样式类名

显示模式 ​

  • dot: 圆点模式
  • line: 线条模式
  • filled: 填充背景模式
  • pill: 胶囊形状
  • glow: 发光效果
  • gradient: 渐变背景

动画效果 ​

  • pulse: 脉冲动画
  • wave: 波浪动画

预设状态颜色 ​

支持单色或渐变色数组配置：

js
const colors = {
  ready: ['#4CAF50', '#45a049'],
  error: ['#F44336', '#d32f2f'],
  warning: ['#FFC107', '#ffa000'],
  success: ['#13FF98', '#00e676'],
  processing: ['#1890ff', '#096dd9'],
  disabled: ['#d9d9d9', '#bfbfbf']
}

自定义状态颜色 ​

你完全可以配置自己的状态颜色，只需在colors属性中进行配置, 并在status属性中使用你配置的状态即可。

vue
<template>
  <!-- 渐变胶囊 -->
  <ProStatusText
    status="enabled"
    text="自定义渐变"
    mode="gradient"
    :colors="{
      enabled: ['#FF416C', '#FF4B2B'],
      disabled: ['#d9d9d9', '#bfbfbf'],
    }"
  />

  <!-- 发光效果 -->
  <ProStatusText
    status="glow"
    text="发光文本"
    mode="glow"
    animation="pulse"
  />
</template>