el-switch文字内置

最新推荐文章于 2025-08-26 11:08:30 发布

原创最新推荐文章于 2025-08-26 11:08:30 发布 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

3 篇文章

订阅专栏

有时候elementui组件的开关组件要文字内置

<el-row>
              <el-col :span="21">
                <el-form-item label="是否填写违法人员信息">
                  <el-switch
                  class="main-el-switch"
                    v-model="switchValue"
                    active-color="#0aaaff"
                    inactive-color="#ff4949"
                      active-text="是"
     inactive-text="否"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>

 //下面css是为了把文字放在按钮的上面

::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {<el-row>
              <el-col :span="21">
    
    position: relative;
    .el-switch__core {
      height: 24px;
          width: 49px !important;
      border-radius: 12px;
      &:after {
        left: 4px;
        top: 3px;
      }
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            margin-left: -20px;
            left: 100%;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: white;
      z-index: 1;
      margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: white;
      opacity: 0;
      margin-left: 8px;
    }
  }
}