用vue实现自定义组件的开关功能

1. 创建一个开关组件

首先我们需要创建一个组件来实现开关功能，可以命名为 Switch.vue。

在 Switch.vue 文件中，可以添加以下代码：

<template>
  <div class="switch" @click="toggle">
    <div class="toggle" :class="{ 'active': value }"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style scoped>
.switch {
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}

.toggle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s;
}

.active {
  left: 28px;
  background-color: #67c23a;
}
</style>

2. 使用开关组件

在需要使用开关组件的地方，可以先在 data 中定义一个开关状态值，然后将这个值通过 v-model 绑定到 Switch 组件的 value 属性上。

<template>
  <div>
    <h2>开关状态：{{ switchStatus }}</h2>
    <Switch v-model="switchStatus" />
  </div>
</template>

<script>
import Switch from '@/components/Switch.vue'

export default {
  components: {
    Switch
  },
  data() {
    return {
      switchStatus: false
    }
  }
}
</script>

这样就可以使用自定义的开关组件来实现开关功能了。当开关状态改变时，父组件的 switchStatus 值也会相应地改变。