前端——》vue中自定义switch开关样式美化修改

最新推荐文章于 2025-02-15 20:16:01 发布

Mr_xujiee

最新推荐文章于 2025-02-15 20:16:01 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue switch标签美化 vue自定义switch开关组件

本文链接：https://blog.csdn.net/nienianzhi1744/article/details/103862216

本文介绍如何在Vue项目中对switch开关进行样式美化和自定义组件的创建。内容包括在表单和表格中使用switch开关的实现步骤，以及引用和组件定义的方法。部分样式灵感来源于简书博主。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分隔线以上为表单中的switch开关

分割线以下为表格中的switch开关

实现步骤：一：先建一个vue页面，取名switch

<template>
    <div>
        <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
            <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
                {
  
  {direction[0]}}
            </d