switch控件的实现[编程小技巧]

视频学习入口：点击进入

前言：

工作中对于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);
      }

      
}