当前位置：首页 > 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>

使用方法：

vue实现状态灯

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

标签: 状态 vue

分享给朋友：

vue alert实现

使用 Vue 实现 Alert 组件在 Vue 中实现 Alert 组件可以通过自定义组件或结合第三方库完成。以下是几种常见方法：自定义 Alert 组件创建一个可复用的 Alert 组件，通…

vue实现换肤

使用 CSS 变量实现换肤在 Vue 项目中，可以通过 CSS 变量（Custom Properties）动态切换主题色。CSS 变量可以在运行时修改，适合实现换肤功能。定义全局 CSS 变量：…

vue实现webapp

Vue 实现 WebApp 的基本步骤环境准备确保已安装 Node.js 和 npm/yarn。通过 Vue CLI 或 Vite 创建项目： npm install -g @vue/cli v…

vue实现画板

Vue 实现画板功能在 Vue 中实现画板功能可以通过 HTML5 的 Canvas API 实现。以下是一个完整的实现方案：创建 Vue 组件新建一个 Vue 单文件组件（SFC），命名为…

vue实现导航

使用 Vue Router 实现导航 Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页应用（SPA）的导航系统。以下是实现导航的基本步骤。安装 Vue Router n…

vue 实现循环

Vue 实现循环的方法在 Vue 中，可以使用 v-for 指令来实现循环渲染列表数据。以下是几种常见的循环实现方式：基本数组循环 <template> <ul>…

vue实现状态灯