Pure CSS analog switch slide Andrews

First on effect

Go online to find a pile of feeling on this simple little changed change (although I have not read blind j8 reform)

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 }

Recently played vue (but not playing) function to achieve dynamic refresh data, vue nice with data binding

Then comes the switch, there is a problem, if the background is not successful, the page switch is still closed or opened

So toss for a long time so get a bit

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>

Call changeStatus way when re-query of the record, and then the data acquired before the list of the bank's coverage click on it

Especially the onclick method is set to return false; he will not be clicked after tick (here is the button state changes)

But it will trigger the click event unless the data changes he would change state