先上效果
去网上找了一堆 感觉就这个比较简单 稍微改了改 （然而我并看不懂 瞎j8改的）
1 <label class="switch"> 2 <input type="checkbox"> 3 <span class="track"></span> 4 <span class="slider"></span> 5 </label>
1 .switch { 2 margin: 0 0 0 1px; 3 padding: 0; 4 display: inline-block; 5 position: relative; 6 } 7 8 .switch .track { 9 height: 22px; 10 margin: 0; 11 padding: 0; 12 width: 44px; 13 cursor: pointer; 14 vertical-align: top; 15 background-color: #C33; 16 border-radius: 22px; 17 box-shadow: inset 0 0 1px #999; 18 transition: background-color 0.1s; 19 } 20 21 .switch .slider { 22 position: absolute; 23 left: 0; 24 top: -1px; 25 width: 22px; 26 height: 22px; 27 margin: 0; 28 padding: 0; 29 cursor: pointer; 30 background-color: #fff; 31 border: 1px solid #ccc; 32 border-radius: 22px; 33 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 34 transition: left 0.2s; 35 } 36 37 .switch .track, .switch .slider { 38 display: inline-block; 39 text-align: center; 40 font-size: 22px; 41 line-height: 22px; 42 } 43 44 .switch input { 45 display: none; 46 } 47 48 .switch input:checked ~ .slider { 49 left: 22px; 50 } 51 52 .switch input:checked ~ .track { 53 background-color: #393; 54 }
最近在玩vue（然而并不会玩）要实现动态刷新数据的功能，vue的数据绑定真好用
然后就是这个开关，有个问题，如果后台操作不成功，页面上开关依然是关闭或者打开了
于是折腾了好久这样弄了一下
1 <label class="switch"> 2 <input type="checkbox" 3 :checked="user.status==1?'checked':''" 4 @click="changeStatus(idx, user.uid)" 5 onclick="return false;"> 6 <span class="track"></span> 7 <span class="slider"></span> 8 </label>
调用changeStatus的时候顺便重新查询该条数据，然后把之前获取到的列表中该行的数据覆盖一下就可以了
尤其是那个onclick方法 设置成return false;他被点击后就不会打钩（这里是按钮状态发生改变）
但会触发点击事件 除非数据发生改变他才会改变状态