1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!-- 下拉菜单封装 -->
| <template>
| <el-dropdown trigger="click" @command="handleSetSize">
| <div>
| <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>
|
|
