Vue3 造轮子之 Switch 组件改造的艰辛之路

前端

2023-11-30 04:30:59

前言

在前端开发中，构建自定义组件是一个常见的需求。本文将以 Vue3 为例，介绍如何构建一个自定义 Switch 组件，以及在使用 v-model 时遇到的坑和解决方法。

造轮子的初衷

在开发过程中，我们经常需要使用 Switch 组件来实现开关功能。为了满足不同场景的需求，我们可能会选择使用第三方库提供的 Switch 组件，或者自己动手构建一个自定义 Switch 组件。

遇到的问题

在构建自定义 Switch 组件时，我们遇到了几个问题：

外界无法知道当前状态是开还是关
外界无法输入最开始的状态

解决方案

为了解决这些问题，我们采用了以下解决方案：

添加 value 属性：value 属性用于存储 Switch 组件的当前状态。当 Switch 组件被打开时，value 属性的值为 true；当 Switch 组件被关闭时，value 属性的值为 false。
添加 input 事件：input 事件用于在 Switch 组件的状态发生变化时触发。我们可以通过监听 input 事件来获取 Switch 组件的当前状态。
用 props 让 Switch：使用 props 可以让我们在组件之间传递数据。我们可以通过 props 将 Switch 组件的 value 属性传递给父组件，这样父组件就可以知道 Switch 组件的当前状态。

代码实现

<template>
  <div class="switch">
    <input type="checkbox" :value="value" @change="handleChange">
    <span class="slider"></span>
  </div>
</template>

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

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  display: none;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.switch input:checked + .slider {
  left: 20px;
  background-color: #007bff;
}
</style>