index.vue 1.36 KB
Newer Older
耿迪迪's avatar
耿迪迪 committed
1 2 3 4 5 6
<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <svg-icon class-name="size-icon" icon-class="size" />
    </div>
    <el-dropdown-menu slot="dropdown">
7 8 9 10 11 12 13
      <el-dropdown-item
        v-for="item of sizeOptions"
        :key="item.value"
        :disabled="size === item.value"
        :command="item.value"
      >
        {{ item.label }}
耿迪迪's avatar
耿迪迪 committed
14 15 16 17 18 19 20 21 22 23
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      sizeOptions: [
24 25 26 27 28 29
        { label: "Default", value: "default" },
        { label: "Medium", value: "medium" },
        { label: "Small", value: "small" },
        { label: "Mini", value: "mini" },
      ],
    };
耿迪迪's avatar
耿迪迪 committed
30 31 32
  },
  computed: {
    size() {
33 34
      return this.$store.getters.size;
    },
耿迪迪's avatar
耿迪迪 committed
35 36 37
  },
  methods: {
    handleSetSize(size) {
38 39 40
      this.$ELEMENT.size = size;
      this.$store.dispatch("app/setSize", size);
      this.refreshView();
耿迪迪's avatar
耿迪迪 committed
41
      this.$message({
42 43 44
        message: "Switch Size Success",
        type: "success",
      });
耿迪迪's avatar
耿迪迪 committed
45 46 47
    },
    refreshView() {
      // In order to make the cached page re-rendered
48
      this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
耿迪迪's avatar
耿迪迪 committed
49

50
      const { fullPath } = this.$route;
耿迪迪's avatar
耿迪迪 committed
51 52 53

      this.$nextTick(() => {
        this.$router.replace({
54 55 56 57 58 59
          path: "/redirect" + fullPath,
        });
      });
    },
  },
};
耿迪迪's avatar
耿迪迪 committed
60
</script>