Switch 开关，将字写在滑块上面

效果图：

<el-switchv-model="ruleForm.status"class="tableScopeSwitch":active-value="0":inactive-value="1"active-text="开"inactive-text="关"active-color="#3072ae"></el-switch>><style lang="scss">
.tableScopeSwitch {text-align: center;
}
.tableScopeSwitch .el-switch__label {position: absolute;display: none;color: #fff;
}
/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {z-index: 1;right: 6px;
}
/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {z-index: 1;left: 6px;
}
/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {display: block;
}
.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {width: 51px !important; /*开关按钮的宽度大小*/
}
</style>

Switch 开关，将字写在滑块上面相关推荐

Switch开关,两边字隐藏
<div><el-switch on-text="开" off-text="关" on-color="#13ce66" o ...
Android 基础知识4-3.6 ToggleButton(开关按钮)Switch(开关)详解
一.ToggleButton(开关按钮) 1.1.简介 ToggleButton 类似开关有开和关两种状态,不同的状态下可以有不同的文本. public class ToggleBut ...
微信小程序主题皮肤切换（switch开关）
示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar): 2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果 3.把设置保存到本地,退出应用再进来时,依 ...
LayUi使用switch开关，动态的去控制它是否被启用
layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事 ...
switch开关的async和await初体验
开发组件库时,遇到了一个坑,先看代码 methods:{handleClick(){this.$emit('input',!this.value)this.setColor()}, 我在点击switc ...
C语言复习第一周归纳总结（简介~switch开关语句）
一.C语言简介 1. BCPL-> New B-> C-> UNIX-> Minx -> Linux->gcc C语言诞生:1971~73年,美 ...
html switch开关实现隐藏,css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...
android开发中Switch开关在Dialog中不显示
今天遇到个问题,在dialog中switch开关不显示,而且还把texton 与textoff默认定为"开启","关闭".百度无果.google随便找了下也只看 ...
CSS做个Switch开关
Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id="switch&quo ...

Switch 开关，将字写在滑块上面

Switch 开关，将字写在滑块上面相关推荐

最新文章

热门文章