switch样式优化

coderjam · coderjam · commit b908c3b4d4f9 · 2022-07-23T22:28:28.000+08:00
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,55 +1,66 @@
 <template>
- <button @click="toggle" :class="{checked:value}"> <span></span> </button>
+  <button @click="toggle" :class="{checked:value}"><span></span></button>
 </template>
 <script lang="ts">
 export default {
-  props:{
-    value:Boolean
+  props: {
+    value: Boolean
   },
   // props和context 传值方式
-  setup(props,context){
-    const toggle = ()=>{
+  setup(props, context) {
+    const toggle = () => {
       // 事件：vue3的v-model改动，之前是input
-      context.emit('update:value', !props.value)
-    }
-    return { toggle }
+      context.emit('update:value', !props.value);
+    };
+    return {toggle};
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 $h: 22px;
 $h2: $h - 4px;
-button{
+button {
   height: $h;
-  width: $h*2;
+  width: $h * 2;
   border: none;
   background: #bfbfbf;
   border-radius: $h/2;
   position: relative;
-}
-span{
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  height: $h2;
-  width: $h2;
-  background:white;
-  border-radius: $h2 / 2;
-  transition: all 250ms;
-}
-button.checked{
-  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;}
+
+  > span {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: $h2;
+    width: $h2;
+    background: white;
+    border-radius: $h2 / 2;
+    transition: all 250ms;
+  }
+
+  &.checked {
+    background: #1890ff;
+
+    > span {
+      left: calc(100% - #{$h2} - 2px);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    > span {
+      width: $h2 + 4px;
+    }
+  }
+
+  &.checked:active {
+    > span {
+      width: $h2 + 4px;
+      margin-left: -4px;
+    }
+  }
 }
 </style>
