vue实现toggle功能

Vue 实现 Toggle 功能的方法

使用 v-model 绑定数据

通过 v-model 双向绑定一个布尔值，控制 toggle 的状态。适用于简单的开关场景。

<template>
  <div>
    <button @click="isActive = !isActive">
      {{ isActive ? 'ON' : 'OFF' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

使用自定义组件

封装一个可复用的 toggle 组件，通过 props 和 emit 实现父子组件通信。

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

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

<style>
.toggle {
  width: 50px;
  height: 24px;
  background: #ccc;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle.active {
  background: #4CAF50;
}
.toggle-handle {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
.toggle.active .toggle-handle {
  left: 28px;
}
</style>

使用第三方库

对于更复杂的需求，可以使用专门的 UI 库如 Vuetify 或 Element UI 提供的 toggle 组件。

<template>
  <v-switch v-model="isActive" label="Toggle"></v-switch>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

动画效果增强

通过 Vue 的过渡系统为 toggle 添加平滑的动画效果。

<template>
  <transition name="fade">
    <div v-if="isActive" class="content">Toggle Content</div>
  </transition>
  <button @click="isActive = !isActive">Toggle</button>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这些方法覆盖了从简单到复杂的各种 toggle 实现场景，可以根据具体需求选择合适的方式。