switch样式优化

coderjam · coderjam · commit f632e2acb7a5 · 2022-07-23T22:25:55.000+08:00
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,6 +1,5 @@
 <template>
  <button @click="toggle" :class="{checked:value}"> <span></span> </button>
-  <div>{{ value }}</div>
 </template>
 <script lang="ts">
 export default {
@@ -24,10 +23,9 @@ button{
   height: $h;
   width: $h*2;
   border: none;
-  background: grey;
+  background: #bfbfbf;
   border-radius: $h/2;
   position: relative;
-  cursor: pointer;
 }
 span{
   position: absolute;
@@ -37,15 +35,21 @@ span{
   width: $h2;
   background:white;
   border-radius: $h2 / 2;
-  transition: left 250ms;
+  transition: all 250ms;
 }
 button.checked{
-  background: #1989fa;
+  background: #1890ff;
 }
 button.checked > span {
   left: calc(100% - #{$h2} - 2px);
 }
 button:focus{
   outline: none;
 }
+button:active{
+  > span {width: $h2 + 4px;}
+}
+button.checked:active{
+  > span {width: $h2 + 4px; margin-left: -4px;}
+}
 </style>
