vue3中elementplus开关

在Vue3中使用Element Plus开关，你需要进行以下几个步骤：

1. 首先，在你的组件中导入所需的元素和样式：

import { ref } from 'vue';
import { ElSwitch } from 'element-plus';
import 'element-plus/lib/theme-chalk/switch.css';

2. 在组件的`setup`函数中，定义你需要的开关绑定的变量，并将其暴露出去：

const value1 = ref(true);
const value2 = ref(true);

return {
  value1,
  value2
};

3. 在模板中使用Element Plus的开关组件，并绑定相应的变量：

<template>
  <div>
    <el-switch v-model="value1" />
    <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  </div>
</template>

4. 最后，在你的`main.js`文件中，按照Element Plus的文档注册组件并导入所需的样式：

import { createApp } from 'vue';
import { ElIcon } from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.component(ElIcon.name, ElIcon);
app.mount('#app');

这样，你就可以在Vue3中使用Element Plus开关了。记得根据你的需要，适当调整开关的样式和功能。