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>