switch组件的基本样式

coderjam · coderjam · commit f34945e88151 · 2022-08-26T15:27:02.000+08:00
diff --git a/src/App.vue b/src/App.vue
@@ -3,15 +3,7 @@ import DemoSwitch from './components/DemoSwitch.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <DemoSwitch msg="Vite + Vue" />
+  <DemoSwitch />
 </template>
 
 <style scoped>
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,13 +1,49 @@
 <script setup lang="ts">
-
+import {ref} from "vue";
+let status = ref(false)
+const onClick = ()=>{
+  status.value = !status.value
+}
 </script>
 
 <template>
-<div>
-  switch
-</div>
+  <div class="zw-switch" :class="status?'zw-switch-on':''" @click="onClick">
+    <span class="node"></span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+@import "style/var.scss";
+
+.zw-switch {
+  width: $switch-width;
+  height: $switch-height;
+  border: $switch-border-color;
+  border-radius: $switch-border-radius;
+  background-color: $switch-background-color;
+  position: relative;
+
+  .node {
+    width: 18px;
+    height: 18px;
+    border: $switch-border-color;
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 50%;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: transform $switch-transition-duration cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &-on{
+    background-color: #1989fa;
+    box-shadow: 0 0 0 2px rgba(45,140,240,.2);
+
+    .node{
+      transform: translateX($switch-width - 18px - 4px);
+    }
+  }
 
+}
 </style>
diff --git a/src/lib/style/var.scss b/src/lib/style/var.scss
@@ -0,0 +1,10 @@
+// Animation
+$animation-duration-base: 0.3s;
+
+// Switch
+$switch-width: 44px;
+$switch-height: 22px;
+$switch-border-radius: 11px;
+$switch-border-color: #ccc;
+$switch-background-color: #ccc;
+$switch-transition-duration: $animation-duration-base;
