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

 原文链接：https://blog.csdn.net/AzeShinja/article/details/123681900