写一个vue组件，包含el-switch 控件，其v-model需要根据一个枚举变量来判断

声明：该文章转载链接出自https://www.5axxw.com/questions/simple/2jfcar

以下是一个基于el-switch的Vue组件，其v-model根据一个枚举变量（status）来判断是否为开/关状态：

<template>
  <el-switch v-model="statusValue"></el-switch>
</template>
<script>
export default {
  props: {
    status: {
      type: Number, // 接受数字类型
      default: 0 // 默认为关闭状态
    }
  },
  computed: {
    statusValue: {
      get() {
        return this.status === 1; // 返回布尔值
      },
      set(value) { // 将布尔值转为数字类型
        this.$emit('update:status', value ? 1 : 0);
      }
    }
  }
}
</script>

 使用方式：

<template>
  <my-switch v-model="currentStatus" />
</template>
<script>
import MySwitch from './MySwitch.vue';
export default {
  components: {
    MySwitch
  },
  data() {
    return {
      currentStatus: 1 // 开启状态
    }
  }
}
</script>

其中，通过computed属性将v-model的值绑定到statusValue上，返回一个布尔值，表示当前状态是否为开启。在set函数中，将v-model传递的布尔值转为数字类型，并通过$emit触发update:status的事件，将值传递给父组件。在父组件中，将父组件的变量（currentStatus）作为v-model绑定到该组件上，即可实现组件和父组件的双向绑定。