vue 自定义switch组件

Vue 中自定义开关（Switch）组件通常是用于表示二选一的状态，类似于 HTML 的 `<input type="checkbox">`。为了创建一个自定义的 Switch 组件，你可以遵循以下步骤：

1. **HTML结构**：

<template>
  <div class="custom-switch">
    <input type="checkbox" v-model="value" :id="id" @change="handleChange">
    <label :for="id"></label>
    <span class="slider round"></span>
  </div>
</template>

这里我们使用 `v-model` 来绑定数据属性 `value`，并监听 `change` 事件处理切换状态。

2. **CSS样式**：
创建一个 `.custom-switch`, `.slider`, 和`.round` 等类的样式，以便控制开关的外观和交互效果。

3. **Vue实例**：

<script>
export default {
  name: 'CustomSwitch',
  props: {
    id: String,
    value: Boolean // 数据绑定的值，默认初始状态
  },
  methods: {
    handleChange(event) {
      this.$emit('input', event.target.checked); // 触发父组件的事件并传递新状态
    }
  }
};
</script>

在这个组件中，我们定义了props接受外部传递的标识符和初始状态，并通过`handleChange`方法响应用户点击，然后通过 `$emit` 发送一个名为 `input` 的自定义事件，将新的状态传递给父组件。

4. **使用组件**：
在父组件中接收这个自定义开关并设置回调处理状态变化：

<custom-switch :id="switchId" v-model="switchValue" @input="handleSwitchChange"></custom-switch>