vue实现状态灯

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" />