当前位置：首页 > VUE

vue实现switch

2026-01-07 18:15:04VUE

Vue 实现 Switch 开关组件

在 Vue 中实现 Switch 开关组件可以通过自定义组件或使用现有 UI 库完成。以下是几种常见实现方式：

自定义 Switch 组件

创建一个基础 Switch 组件，通过 v-model 实现双向绑定：

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

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

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

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

.switch-toggle.on {
  left: 28px;
  background: #4CAF50;
}
</style>

使用第三方 UI 库

Element UI 提供了现成的 Switch 组件：

<template>
  <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
  </el-switch>
</template>

<script>
import { ElSwitch } from 'element-ui'

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

Vuetify 的 Switch 实现

<template>
  <v-switch v-model="value" color="primary"></v-switch>
</template>

<script>
import { VSwitch } from 'vuetify/lib'

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

带标签的 Switch 组件

实现一个带有开/关标签的 Switch：

<template>
  <div class="labeled-switch" @click="toggle">
    <span class="label">{{ value ? 'ON' : 'OFF' }}</span>
    <div class="switch" :class="{ 'on': value }"></div>
  </div>
</template>

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

<style>
.labeled-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.label {
  margin-right: 8px;
  font-weight: bold;
}

.switch {
  width: 40px;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  position: relative;
}

.switch:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}

.switch.on {
  background: #4CAF50;
}

.switch.on:after {
  left: 22px;
}
</style>

这些实现方式覆盖了从基础自定义组件到主流UI库的多种方案，可根据项目需求选择合适的实现方法。

vue实现switch