feat:更新

src/components/topButton/main.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="top-button">
-    <large-top-button :mode="mode"></large-top-button>
-
-    <small-top-button :mode="mode"></small-top-button>
+    <top-btn-view
+      :mode="mode"
+      :active="active === 0"
+      @click.native="clickBtnView(0)"
+    ></top-btn-view>
+    <top-btn-view
+      :mode="mode"
+      :active="active === 1"
+      @click.native="clickBtnView(1)"
+    ></top-btn-view>
   </div>
 </template>
 
 <script>
-import largeTopButton from "./large.vue";
-import smallTopButton from "./small.vue";
+import topBtnView from "./topBtnView.vue";
 export default {
   name: "TopButton",
   components: {
-    largeTopButton,
-    smallTopButton
+    topBtnView
   },
   props: {
     mode: {
@@ -21,7 +26,18 @@ export default {
       default: "blue"
     }
   },
-  computed: {}
+  computed: {
+    active() {
+      if (this.mode === "blue") return 0;
+      if (this.mode === "gold") return 1;
+      return 0;
+    }
+  },
+  methods: {
+    clickBtnView(index) {
+      this.$emit("clickTopButton", index);
+    }
+  }
 };
 </script>
 

src/components/topButton/topBtnView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <large-top-button :mode="mode" v-if="active"></large-top-button>
+    <small-top-button :mode="mode" v-else></small-top-button>
+  </div>
+</template>
+
+<script>
+import largeTopButton from "./large.vue";
+import smallTopButton from "./small.vue";
+export default {
+  name: "TopBtnView",
+  components: {
+    largeTopButton,
+    smallTopButton
+  },
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    active(val) {
+      console.log("watch", val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>