使用vue3 写一个开关，包含未处理，通过，拒绝这三种状态

可以使用Vue3中的`v-model`指令和`computed`属性来实现一个简单的开关组件，包含未处理、通过、拒绝这三种状态。

首先，我们需要定义一个`Switch`组件，包含一个`value`属性表示当前状态，以及三个常量分别表示未处理、通过和拒绝这三种状态：

<template>
  <div class="switch">
    <button :class="{ active: value === UNPROCESSED }" @click="setValue(UNPROCESSED)">未处理</button>
    <button :class="{ active: value === APPROVED }" @click="setValue(APPROVED)">通过</button>
    <button :class="{ active: value === REJECTED }" @click="setValue(REJECTED)">拒绝</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  const UNPROCESSED = 'unprocessed';
  const APPROVED = 'approved';
  const REJECTED = 'rejected';
  methods: {
    setValue(newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

<style>
.switch {
  display: flex;
}

button {
  border: 1px solid #ccc;
  padding: 5px;
  cursor: pointer;
}

.active {
  background-color: #ccc;
}
</style>

在上面的代码中，我们使用`props`属性定义了一个`value`属性，它表示当前的状态。然后，我们定义了三个常量`UNPROCESSED`、`APPROVED`和`REJECTED`，分别表示未处理、通过和拒绝这三种状态。在`template`中，我们使用`v-bind:class`指令和三元表达式来动态设置按钮的样式，如果`value`等于当前状态，则添加`active`类。在`methods`中，我们定义了一个`setValue`方法，当用户点击按钮时调用该方法，同时使用`$emit`方法触发`input`事件，并将新的状态值作为参数传递给父组件。

现在，我们可以在父组件中使用`Switch`组件，并使用`v-model`指令来双向绑定状态值：

<template>
  <div>
    <Switch v-model="status" />
    <p>当前状态：{{ status }}</p>
  </div>
</template>

<script>
import Switch from './Switch.vue';

export default {
  components: {
    Switch
  },
  data() {
    return {
      status: 'unprocessed'
    };
  }
};
</script>

在上面的代码中，我们导入了`Switch`组件，并在`template`中使用它。使用`v-model`指令将`status`属性与`Switch`组件的`value`属性双向绑定。最后，我们在`<p>`标签中显示当前的状态值。现在，我们就可以使用这个简单的开关组件了，它包含未处理、通过和拒绝这三种状态。