手写一个switch开关UI组件

最近公司移动端web项目中新增了通知设置功能,需要用到switch开关组件,但该项目没有用到任何的UI组建库,因此需要自己来写一个switch组件,接下来就一步步的实现一个switch开关的组件。

HTML页面结构

<section class='model-15'>
   <label class='switch'>
     <input type='checkbox'>
     <span></span>
  </label>
</section>

CSS样式

.switch{
  width:40px;
  height:20px;
  border-radius:30px;
  overflow: hidden;
  vertical-align:middle;
  position:relative;
  display: inline-block;
  background:#ccc;
  box-shadow: 0 0 1px #36a6d4;
}
.switch input{
  visibility: hidden;
}
.switch span{
  position:absolute;
  top:0;
  left:0;
  border-radius: 50%;
  background:#fff;
  width:50%;
  height:100%;
  transition:all linear 0.2s;
}
.switch span::before{
  position: absolute;
  top:0;
  left:-100%;
  content:'';
  width:200%;
  height:100%;
  border-radius: 30px;
  background:#36a6d4;
}
.switch span::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius: 50%;
  background:#fff;
}
.switch input:checked +span{
  transform:translateX(100%);
}

实现效果

ON&&OFF.png

写在最后

以上只是实现了基础的UI效果,但是该组件重点还是在功能实现,基本思路在于根据点击input单选框后会添加checked属性的特性来实现开关的切换。如果使用jQuery这种传统框架,那可能就需要获取到DOM然后控制checked的属性来实现。但我在项目中使用的是Vue,Vue的核心就是数据驱动,因此只需要处理数据层就可以。好了,千言万语不如上代码。

视图层代码
<table border='1'>
        <tr>
          <th>通知类型</th>
          <th>站内消息</th>
          <th>微信通知</th>
          <th>短信通知</th>
        </tr>
        <tr v-for='(item, index) in list'>
          <td>{{item.title}}</td>
          <td>
            <section class='model-15'>
              <label class='switch'>
                <input type='checkbox' class='site' checked v-if='item.status.site === "ON"' @click="handleSwitch(index, 'site', item.status.site)">
                <input type='checkbox' class='site' v-else @click="handleSwitch(index, 'site', item.status.site)">
                <span></span>
              </label>
            </section>
          </td>
          <td>
            <section class='model-15'>
              <label class='switch'>
                <input type='checkbox' class='wechat' checked v-if='item.status.wechat === "ON"' @click="handleSwitch(index, 'wechat', item.status.wechat)">
                <input type='checkbox' class='wechat' v-else @click="handleSwitch(index, 'wechat', item.status.wechat)">
                <span></span>
              </label>
            </section>
          </td>
          <td>
            <section class='model-15' v-if='item.label'>
              <label class='switch'>
                <input type='checkbox'  class='sms' checked v-if='item.status.sms === "ON"' @click="handleSwitch(index, 'sms', item.status.sms)">
                <input type='checkbox'  class='sms' v-else @click="handleSwitch(index, 'sms', item.status.sms)">
                <span></span>
              </label>
            </section>
          </td>
        </tr>
      </table>

因为我这里要控制的开关比较多,其他代码就不一一贴了,无非就是初始化页面时请求数据,根据返回数据状态控制开关,然后点击开关时修改对应开关的状态数据,最后根据数据提交表单。

切换开关改变数据
handleSwitch (index, type, state) {
        if (state === 'ON') {
          this.list[index].status[type] = 'OFF'
        } else {
          this.list[index].status[type] = 'ON'
        }
      },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 前几天看了两部电影,一部《天下无贼》,一部《以后的我们》,俱是淹没在自己的泪水中。 没写观后感,想写写自己的这种状...
    七月的莱斯特阅读 159评论 0 0
  • 人性哈哈哈哈 我是个杀人犯是个被所有人都讨厌的杀人犯我14岁的时候经常被别人欺负被别人勒索直到有一天我受不了了我拿...
    厌世V阅读 276评论 0 0
  • 每一张船票,一个故事。美丽的政法学院姑娘,热心的阿姨,三亚学院的学霸小姐姐,毒舌老爱批判的大叔,政法学院姑娘冷酷的...
    一城烟雨yy阅读 215评论 0 1