| | |
| | | <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>
|
| | | <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> |