vue 实现toggle效果

Vue 实现 Toggle 效果的方法

使用 v-model 绑定数据

在 Vue 中，可以通过 v-model 双向绑定数据来实现 toggle 效果。创建一个布尔值变量，用于控制 toggle 的状态。

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

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

使用计算属性优化显示

计算属性可以动态计算 toggle 的状态，使代码更清晰。

<template>
  <button @click="toggle">
    {{ toggleText }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    toggleText() {
      return this.isActive ? 'ON' : 'OFF'
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    }
  }
}
</script>

使用 CSS 过渡效果

通过 Vue 的过渡类名结合 CSS，可以实现平滑的 toggle 动画效果。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Toggle Content</p>
    </transition>
  </div>
</template>

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

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

使用第三方组件库

许多 Vue UI 组件库（如 Element UI、Vuetify）提供了现成的 toggle 组件。

<template>
  <el-switch v-model="value" active-text="ON" inactive-text="OFF">
  </el-switch>
</template>

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

自定义 Toggle 组件

封装一个可复用的 toggle 组件，增强灵活性。

<template>
  <div class="custom-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>
.custom-toggle {
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.custom-toggle.active {
  background: #4CAF50;
}
.toggle-handle {
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
.custom-toggle.active .toggle-handle {
  left: 32px;
}
</style>

以上方法可以根据具体需求选择适合的方式实现 toggle 效果。