自己实现switch开关

web/src/components/Switch.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="track aria-theme-independent" :class="value ? 'on' : 'off'"
+    @click.passive="onClick"
+    @keydown.enter.passive="onEnter"
+  >
+    <div class="slider"></div>
+    <input v-show="false" type="checkbox" :id="id">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    id: {
+      type: String,
+      default: '',
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value)
+    },
+    onEnter() {
+      this.$emit('input', !this.value)
+    },
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.track {
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  position: relative;
+  transition: all 0.3s;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  .slider {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: white;
+    position: absolute;
+    top: 2px;
+  }
+}
+.off {
+  background: #DCDFE6;
+  .slider {
+    left: 2px;
+    right: auto;
+  }
+}
+.on {
+  background: #AB3434;
+  .slider {
+    left: auto;
+    right: 2px;
+  }
+}
+</style>

web/src/views/layout/index.vue

@@ -60,12 +60,20 @@
                 Caring Mode
               </label>
               &nbsp;
-              <el-switch v-model="loveFlag" active-color="#AB3434"
+              <MySwitch
+                v-model="loveFlag"
                 id="caring-mode-switch"
                 tabindex="0"
                 aria-label="Button"
                 aria-description="Caring Mode"
-              />
+              ></MySwitch>
+              <!-- 为了让组件内部也能更换主题色，所以不再使用第三方组件 -->
+              <!-- <el-switch v-model="loveFlag" active-color="#AB3434"
+                id="caring-mode-switch"
+                tabindex="0"
+                aria-label="Button"
+                aria-description="Caring Mode"
+              /> -->
             </li>
           </ul>
         </div>
@@ -148,11 +156,13 @@
 <script>
 import Accessibility from '/src/views/accessibility.vue'
 import { topData } from "./data";
+import MySwitch from "/src/components/Switch.vue";
 
 export default {
   name: "Layout",
   components: {
     Accessibility,
+    MySwitch,
   },
   data() {
     //这里存放数据