el-switch自定义开启、关闭样式

最新推荐文章于 2024-05-28 00:45:00 发布

衬酸

最新推荐文章于 2024-05-28 00:45:00 发布

阅读量507

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_39500287/article/details/133775364

版权

在这里插入图片描述

<el-switch
  class="switchStyle"
  v-model="scope.row.status"
  active-value="0"
  inactive-value="1"
  active-text='开启'
  inactive-text='关闭'
  active-color="#37485c"
  @change="handleStatusChange(scope.row)"
></el-switch>

<style lang="scss" scoped>
::v-deep .switchStyle {
  width: 100px !important;
  height: 35px !important;

  .el-switch__core {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px;
    background: #cccccc;
  }

  //开关内区域
  .el-switch__label {
    position: absolute;
    padding-top: 1px;
    display: none;
    color: #fff;
    font-size: 10px !important;

    // switch开关在左的文字设置
    &--left {
      color: #ffffff !important;
      z-index: 1;
      right: 1px;
    }

    // switch开关在右的文字设置
    &--right {
      color: #ffffff !important;
      z-index: 1;
      left: 1px;
      font-size: 10px;
    }

    &.is-active {
      display: block;
    }
  }

  // switch开关靠左的样式
  .el-switch__core:after {
    width: 50px;
    height: 100%;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #e4e4e4;
  }

  // switch开关靠右的样式
  &.el-switch.is-checked .el-switch__core::after {
    width: 50px;
    height: 35px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    top: -1px;
    left: 68%;
    bottom: 0;
    background-color: #57b99d;
  }
}
</style>