视频学习入口:点击进入
前言:
工作中对于switch标签,你是不是第一反应是引用第三方库,对于一个系统而言,引入ui库无可厚非;但是对于一个简单的页面为了一个switch而引入一个ui库是得不偿失的;
今天就给大家分享一个自己实现switch组件的方法
代码实现:
<div class="wrapper" @click="signAlert = !signAlert">
<input type="checkbox" :checked="signAlert" />
<div class="slider"></div>
</div>
.wrapper {
position: relative;
display: inline-block;
width: 63px;
height: 34px;
input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #9d9c9a;
-webkit-transition: 0.4s;
transition: 0.4s;
&:before {
position: absolute;
content: '';
border-radius: 50%;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
}
input:checked + .slider {
background-color: #cc375c;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
}