Initial commit

src/components/SizeSelect/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dropdown trigger="click" @command="handleSetSize">
+    <div style="line-height: 50px">
+      <svg-icon class-name="size-icon" icon-class="size" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
+        {{item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sizeOptions: [
+        { label: "Default", value: "default" },
+        { label: "Medium", value: "medium" },
+        { label: "Small", value: "small" },
+        { label: "Mini", value: "mini" },
+      ],
+    };
+  },
+  computed: {
+    size() {
+      return this.$store.getters.size;
+    },
+  },
+  methods: {
+    handleSetSize(size) {
+      this.$ELEMENT.size = size;
+      this.$store.dispatch("app/setSize", size);
+      this.refreshView();
+      this.$message({
+        message: "Switch Size Success",
+        type: "success",
+      });
+    },
+    refreshView() {
+      // In order to make the cached page re-rendered
+      this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
+
+      const { fullPath } = this.$route;
+
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: "/redirect" + fullPath,
+        });
+      });
+    },
+  },
+};
+</script>