完成切换

Former-commit-id: 26205ebf26a34b47060c3685cb4d969140e94f61 [formerly 26205ebf26a34b47060c3685cb4d969140e94f61 [formerly 26205ebf26a34b47060c3685cb4d969140e94f61 [formerly 26205ebf26a34b47060c3685cb4d969140e94f61 [formerly 659e4b42eec3fb5106a46f8c06c4b62170e4385e [formerly 33bd817d31a89ff29b25860e8e553198f426966b]]]]]
Former-commit-id: e9c520cc0f970cf63f834a8a4f1de806465e054c
Former-commit-id: 3ab6ec0c07d8739e484ebde242beebbf761e9a11
Former-commit-id: 44e9aaa39c1d5becbfab509fcb80b15c4e11bf18 [formerly 9bf3ab07eac16679f064a20af7b5483c36b11503]
Former-commit-id: 624cbcde01906949ce2ca04c7f522fe6c078bc62
Former-commit-id: 2f0ff3c6614b44b17fba9305acd199b145f07273
Former-commit-id: 8ff08e2826218d1a3f6276f367c81f628fe38970
Former-commit-id: 2bd544a5f39a5e8c3e88082d517f33ed3f49f7f2
Former-commit-id: 45586821281ab265e08b09b1af718d30964db101

src/layout/header-aside/components/header-size/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-dropdown placement="bottom" size="small" @command="handleChange">
+    <el-button class="d2-mr btn-text can-hover" type="text">
+      <d2-icon name="font" style="font-size: 16px;"/>
+    </el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="medium">
+        <d2-icon :name="iconName('medium')" class="d2-mr-5"/>
+        大
+      </el-dropdown-item>
+      <el-dropdown-item command="small">
+        <d2-icon :name="iconName('small')" class="d2-mr-5"/>
+        中
+      </el-dropdown-item>
+      <el-dropdown-item command="mini">
+        <d2-icon :name="iconName('mini')" class="d2-mr-5"/>
+        小
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  name: 'd2-size-control',
+  computed: {
+    ...mapState('d2admin/size', [
+      'value'
+    ])
+  },
+  methods: {
+    ...mapMutations('d2admin/size', [
+      'set'
+    ]),
+    handleChange (value) {
+      this.$ELEMENT.size = value
+      this.set(value)
+    },
+    iconName (name) {
+      return name === this.value ? 'dot-circle-o' : 'circle-o'
+    }
+  }
+}
+</script>