自定义开关按钮
layui中switch功能在vue环境下无法正常渲染,估计是冲突了,为解决这个问题,博主没办法,只能自己画一个switch了。
运行效果如下:
完成代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.BtnSwitch {cursor: pointer;position: relative;border: 1px solid #dfdfdf;
background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;background-clip: content-box;
display: inline-block;-webkit-appearance: none;user-select: none;outline: none !important;}
.BtnSwitch.large {width: 57px;height: 21px;border-radius: 19px;}
.BtnSwitch.large:before {content: '';width: 19px;height: 19px;border-radius: 19px;}
.BtnSwitch.large:after {content: '关闭';color: #999;left: 23px;position: absolute;line-height: 21px;font-size: 12px;}
.BtnSwitch.large:checked:after {content: '开启';color: #fff;left: 8px;position: absolute;line-height: 21px;font-size: 12px;}
.BtnSwitch.large:checked:before {left: 36px;}
.BtnSwitch:before {position: absolute;top: 0px;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);}
.BtnSwitch:checked {border-color: #64bd63;box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63;}
input[type=checkbox]:checked::before {font: normal normal normal 14px/2 FontAwesome;}
</style>
</head>
<body>
<input class="BtnSwitch large" type="checkbox" value="" checked="">
</body>
</html>