当前位置：首页 > VUE

vue实现状态灯

2026-01-23 16:28:36VUE

Vue 实现状态灯

在 Vue 中实现状态灯可以通过动态绑定样式或类名来实现，以下是几种常见方法：

动态类名绑定

通过计算属性或条件判断动态切换类名，控制状态灯的显示样式：

<template>
  <div class="status-light" :class="statusClass"></div>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      required: true,
      validator: value => ['success', 'warning', 'error'].includes(value)
    }
  },
  computed: {
    statusClass() {
      return `status-${this.status}`;
    }
  }
};
</script>

<style>
.status-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-success {
  background-color: #4CAF50;
}

.status-warning {
  background-color: #FFC107;
}

.status-error {
  background-color: #F44336;
}
</style>

动态样式绑定

直接通过内联样式动态改变状态灯颜色：

<template>
  <div 
    class="status-light" 
    :style="{ backgroundColor: statusColor }"
  ></div>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      required: true
    }
  },
  computed: {
    statusColor() {
      const colors = {
        success: '#4CAF50',
        warning: '#FFC107',
        error: '#F44336'
      };
      return colors[this.status] || '#9E9E9E';
    }
  }
};
</script>

带动画的状态灯

添加过渡效果使状态变化更平滑：

<template>
  <div 
    class="status-light" 
    :class="statusClass"
  ></div>
</template>

<style>
.status-light {
  transition: background-color 0.3s ease;
}
</style>

完整组件示例

封装为可复用的状态灯组件：

<template>
  <div 
    class="status-light"
    :class="`status-${status}`"
    :title="statusText"
  ></div>
</template>

<script>
export default {
  name: 'StatusLight',
  props: {
    status: {
      type: String,
      default: 'default',
      validator: value => ['success', 'warning', 'error', 'default'].includes(value)
    }
  },
  computed: {
    statusText() {
      const texts = {
        success: '运行正常',
        warning: '需要注意',
        error: '出现故障',
        default: '未知状态'
      };
      return texts[this.status];
    }
  }
};
</script>

<style>
.status-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.status-success {
  background-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.status-warning {
  background-color: #FFC107;
  box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
}

.status-error {
  background-color: #F44336;
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
}

.status-default {
  background-color: #9E9E9E;
  box-shadow: 0 0 5px rgba(158, 158, 158, 0.5);
}
</style>

使用方法：

<status-light status="success" />
<status-light status="warning" />
<status-light status="error" />

vue实现状态灯

标签: 状态 vue

分享给朋友：

vue如何实现注册

实现用户注册功能在Vue中实现注册功能通常需要结合前端表单和后端API交互。以下是完整的实现方案：创建注册表单组件注册表单需要包含用户名、邮箱、密码等基本字段，并进行表单验证： <…

vue实现好评弹框

Vue 实现好评弹框的方法使用 Vue 实现好评弹框可以通过组件化方式完成，结合动态数据绑定和事件处理。以下是具体实现步骤： 1. 创建弹框组件新建一个 RatingDialog.vue 组件…

vue实现a4打印模板

使用Vue实现A4打印模板在Vue中实现A4打印模板需要结合CSS的打印样式和Vue的模板渲染能力。以下是具体实现方法：设置A4纸张尺寸在CSS中定义A4纸张的标准尺寸（210mm × 29…

vue实现流程

Vue 实现流程的基本步骤安装 Vue.js 可以通过 CDN 引入或使用 npm/yarn 安装。 CDN 方式： <script src="https://cdn.jsdelivr.…

vue实现高亮

Vue 实现文本高亮的方法在 Vue 中实现文本高亮可以通过多种方式完成，以下是几种常见的方法：方法一：使用 v-html 指令通过 v-html 指令可以动态插入 HTML 内容，将需要高…

vue实现markdown

Vue 实现 Markdown 编辑器在 Vue 中实现 Markdown 编辑器可以通过集成第三方库或自定义解析器完成。以下是两种常见方法：使用第三方库（如 marked 或 markdown…

vue实现状态灯