vue3 微波炉旋钮

### Vue3 中实现微波炉旋钮功能的组件

为了创建一个类似于微波炉旋钮的功能，在Vue 3中可以利用组合式API来构建交互逻辑。下面是一个简单的例子，展示了如何通过旋转动作调整设定的时间。

#### 微波炉旋钮组件模板定义

<template>
<div class="microwave-knob">
    <input 
        type="range"
        min="0" max="90" step="1"
        v-model.number="timeSetting"
        @change="updateTime"
        class="knob-input"/>
    <p>当前时间设置: {{ timeSetting }} 秒</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['timeUpdated']);
let timeSetting = ref(0);

function updateTime() {
    emit('timeUpdated', timeSetting.value);
}
</script>

<style scoped>
.microwave-knob .knob-input {
    width: 80%;
}

.microwave-knob p {
    text-align: center;
}
</style>

此代码片段定义了一个名为`MicrowaveKnob` 的自定义组件[^2]。该组件内部维护着一个状态变量 `timeSetting`, 它绑定到HTML `<input>` 元素上作为滑动条控件。每当用户移动滑块时，都会触发 `@change` 事件处理器，并调用方法 `updateTime()` 来更新父级组件的状态。

#### 使用微波炉旋钮组件
假设有一个页面布局如下所示：

<template>
<div id="app">
    <!-- ...其他部分... -->
    <MicrowaveKnob @timeUpdated="handleTimeUpdate"></MicrowaveKnob>
    <button @click="startCooking">开始加热</button>
    
    <p>{{ formattedTime }}</p>
</div>
</template>

<script setup>
// 导入必要的模块...
import MicrowaveKnob from './components/MicrowaveKnob.vue';
import { computed, ref } from 'vue';

let cookingTimeInSeconds = ref(0); 

function handleTimeUpdate(value){
    cookingTimeInSeconds.value = value;
}

const formattedTime = computed(() => `${Math.floor(cookingTimeInSeconds.value / 60)}:${cookingTimeInSeconds.value % 60}`);

async function startCooking(){
    alert(`烹饪${formattedTime.value}分钟`);
}
</script>

在这个场景下，当用户转动虚拟旋钮（即拖拽范围输入框），会发送新的时间值给父组件处理函数 `handleTimeUpdate` 。这使得我们可以轻松地获取最新的时间配置并显示出来或执行进一步的操作，比如启动计时器模拟实际设备的工作流程[^1]。