带启用/禁用文字的开关

@是静静啊

已于 2023-04-06 17:42:25 修改

阅读量492

点赞数

分类专栏：通用文章标签： css html 前端

于 2023-04-04 17:18:08 首次发布

本文链接：https://blog.csdn.net/m0_45272038/article/details/129957750

版权

通用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、效果图
二、代码
- 样式代码

一、效果图

在这里插入图片描述

二、代码

<el-form-item label="状态" class="btnRow" style="width: 25%" required>
          <el-switch
            v-model="editForm.disabled"
            :active-text="editForm.disabled ? '启用' : '禁用'"
          ></el-switch>
 </el-form-item>

样式代码

 .el-switch__label.is-active {
   z-index: 9;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #fff;
   position: absolute;
   left: -4px;
 }
 .el-switch.is-checked .el-switch__core {
   border-color: #4c7cee;
   background: #4c7cee;
 }
 .el-switch__core {
   width: 50px !important;
   border: 1px solid #c5c5c5;
   background: #c5c5c5;
 }
 .el-switch__label * {
   font-size: 10px;
 }
 .el-switch__label--right {
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #fff;
   left: 10px;
   top: -1px;
   position: absolute;
 }