el-switch

 

 

 

 

<template>
<div style='margin:20px'>
<el-switch 
  v-model="value1" 
  active-text="是" 
  inactive-color="#BFBFBF" 
  inactive-text="否" 
  active-value="1" 
  inactive-value="0" 
  @change="test" />
</div>
</template>

<script>
export default {
 data(){
       return {
             value1: true,
      
       }
 }

}
</script>
<style>
.el-switch__label {
  position: absolute;
  display: none;
  font-size: 11px !important;
  color: #fff!important;
}
.el-switch__label *{
  font-size: 11px !important;
}
/*打开时文字位置设置*/
.el-switch__label--right {
  z-index: 1;
  right: 21px; 
  top: 0.5px;
}
/*关闭时文字位置设置*/
.el-switch__label--left {
  z-index: 1;
  left: 23px; 
  top: 0.5px;
}
/*显示文字*/
.el-switch__label.is-active {
  display: block;
}
.el-switch__core {
  width: 45px;
  height: 22px;
  border: 2px solid #DCDFE6;
  border-radius: 13px;
}
</style>