使用vue3+ts封装一个Switch开关组件

<template>
<div class="switch" :class="{ 'switch-on': isOn }" @click="toggle">
<div class="switch-button"></div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
// 定义组件的 props
interface Props {
modelValue: boolean;
}
// 定义组件的 emits
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
}>();
// 使用 ref 创建一个响应式数据
const isOn = ref<boolean>(props.modelValue);
// 定义 toggle 方法来切换开关状态
const toggle = () => {
isOn.value = !isOn.value;
emit('update:modelValue', isOn.value);
};
// 从父组件接收 props
const props = defineProps<Props>();
</script>
<style scoped>
.switch {
width: 50px;
height: 25px;
border-radius: 15px;
background-color: #ccc;
position: relative;
cursor: pointer;
}
.switch-button {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 2.5px;
left: 2.5px;
transition: all 0.3s ease;
}
.switch-on {
background-color: #4caf50;
}
.switch-on .switch-button {
left: 27.5px;
}
</style>

在这个组件中，使用了 Vue 3 的 Composition API 和 TypeScript。定义了一个 isOn 响应式引用，它代表了开关的状态。toggle 方法用于切换 isOn 的值，并通过 emit 函数向父组件发送 update:modelValue 事件，以实现双向数据绑定。

组件的样式部分定义了开关的外观，包括开关本身和按钮的样式，以及开关打开和关闭时的不同状态。

要使用这个组件，可以在父组件中这样引入：

Switch is {{ switchValue ? 'On' : 'Off' }}

在这个父组件中，使用了 v-model 来绑定 switchValue 到 Switch 组件的 modelValue prop，这样就可以实现双向数据绑定。