| <!-- |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <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 :disabled="size==='medium'" command="medium">Medium</el-dropdown-item> |
| <el-dropdown-item :disabled="size==='small'" command="small">Small</el-dropdown-item> |
| <el-dropdown-item :disabled="size==='mini'" command="mini">Mini</el-dropdown-item> |
| </el-dropdown-menu> |
| </el-dropdown> |
| </template> |
| |
| <script> |
| export default { |
| computed: { |
| size() { |
| return this.$store.getters.size |
| } |
| }, |
| methods: { |
| handleSetSize(size) { |
| this.$ELEMENT.size = size |
| this.$store.dispatch('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('delAllCachedViews', this.$route) |
| |
| const { fullPath } = this.$route |
| |
| this.$nextTick(() => { |
| this.$router.replace({ |
| path: '/redirect' + fullPath |
| }) |
| }) |
| } |
| } |
| |
| } |
| </script> |
| |
| <style scoped> |
| .size-icon { |
| font-size: 20px; |
| cursor: pointer; |
| vertical-align: -4px!important; |
| } |
| </style> |
| |