vue使用element的switch将文字嵌入显示

<style lang="scss" scoped>
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    position: relative;
    .el-switch__core {
      height: 24px;
      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: #999;
      z-index: 1;
      margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      margin-left: 8px;
    }
  }
}
</style>

  <el-switch
       v-model="docModel"
       :active-value="1"
       :inactive-value="0"
       class="main-el-switch"
       width="60"
       active-text="多人"
       inactive-text="本地">
   </el-switch>

实现效果如图：

参考原文链接： https://www.cnblogs.com/e0yu/p/15063882.html