智能灯泡控制面板：Vue 组件

应用场景

此 Vue 组件可用于创建用于控制智能灯泡的交互式控制面板。它允许用户调整亮度、颜色和设置定时器。

基本功能

该组件提供以下功能：

• 实时亮度调节
• 颜色选择
• 开关定时器

功能实现步骤及关键代码分析

1. 组件设置

首先，我们使用 Vue 的 ref API 来设置组件的反应状态。这些状态变量用于跟踪灯泡的亮度、颜色和定时器状态。

const brightness = ref(75)
const color = ref('Green')
const schedule = ref('Off')

2. 亮度调节

亮度调节通过一个范围输入实现。当用户更改范围值时，brightness 状态将更新。

<div class="mt-2">
  <input type="range" min="0" max="100" value="75" class="w-full" />
</div>

3. 颜色选择

颜色选择通过一个带有三个彩色圆点的容器实现。当用户单击一个圆点时，color 状态将更新为相应颜色。

<div class="mt-2">
  <div class="flex items-center gap-2">
    <div class="w-6 h-6 rounded-full bg-green-400"></div>
    <div class="w-6 h-6 rounded-full bg-red-400"></div>
    <div class="w-6 h-6 rounded-full bg-blue-400"></div>
  </div>
</div>

4. 定时器开关

定时器开关通过两个按钮实现。一个按钮用于打开定时器，另一个按钮用于关闭定时器。当用户单击这些按钮时，schedule 状态将更新为相应状态。

<div class="mt-2">
  <div class="flex items-center gap-2">
    <button
      class="px-4 py-2 text-sm font-semibold text-white bg-green-400 rounded-lg shadow-md hover:bg-green-500"
    >
      Turn on
    </button>
    <button
      class="px-4 py-2 text-sm font-semibold text-white bg-red-400 rounded-lg shadow-md hover:bg-red-500"
    >
      Turn off
    </button>
  </div>
</div>

5. 方法

此组件还定义了两个方法：turnOn 和 turnOff。这些方法用于根据用户交互更新 schedule 状态。

const turnOn = () => {
  schedule.value = 'On'
}

const turnOff = () => {
  schedule.value = 'Off'
}

总结与展望

开发此组件的经验表明，Vue 的响应式系统非常适合创建交互式 UI 元素。

未来的扩展和优化可以包括：

• 增加额外的颜色选项
• 添加自定义定时器设置
• 集成与其他智能家居设备的通信