使用vue3 写一个三种状态的开关

好的，以下是一个使用 Vue 3 编写的三种状态开关的示例代码：

<template>
  <div class="switch" :class="{ on: isOn, off: !isOn, indeterminate: isIndeterminate }" @click="toggle">
    <div class="knob"></div>
  </div>
</template>

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

export default {
  name: 'Switch',
  setup() {
    const isOn = ref(false);
    const isIndeterminate = ref(false);

    function toggle() {
      if (isIndeterminate.value) {
        isOn.value = true;
        isIndeterminate.value = false;
      } else {
        isOn.value = !isOn.value;
      }
    }

    return {
      isOn,
      isIndeterminate,
      toggle,
    };
  },
};
</script>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.2s;
}

.switch.on {
  background-color: #2196f3;
}

.switch.off {
  background-color: #bbb;
}

.switch.indeterminate {
  background-color: #ff9800;
}

.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.switch.on .knob {
  transform: translateX(26px);
}

.switch.off .knob {
  transform: translateX(2px);
}

.switch.indeterminate .knob {
  transform: translateX(13px);
}
</style>

这里使用了 Vue 3 的 `ref` 来声明状态变量，并使用 `setup` 函数来初始化状态变量和事件处理函数。在模板中，我们根据三种状态分别设置不同的样式类，并在点击时调用 `toggle` 函数来切换状态。样式使用了一些基本的 CSS 技巧来实现动态效果。