<template>
|
<div>
|
<el-dropdown trigger="click" @command="handleSetSize">
|
<div class="size-icon--style">
|
<svg-icon class-name="size-icon" icon-class="size" />
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<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>
|
</template>
|
</el-dropdown>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessage } from 'element-plus'
|
|
const store = useStore();
|
const size = computed(() => store.getters.size);
|
const route = useRoute();
|
const router = useRouter();
|
const {proxy} = getCurrentInstance();
|
const sizeOptions = ref([
|
{ label: 'Large', value: 'large' },
|
{ label: 'Medium', value: 'medium' },
|
{ label: 'Small', value: 'small' },
|
{ label: 'Mini', value: 'mini' }
|
])
|
|
function refreshView() {
|
// In order to make the cached page re-rendered
|
store.dispatch('tagsView/delAllCachedViews', route)
|
|
const { fullPath } = route
|
|
nextTick(() => {
|
router.replace({
|
path: '/redirect' + fullPath
|
})
|
})
|
}
|
function handleSetSize(size) {
|
proxy.$ELEMENT.size = size;
|
store.dispatch('app/setSize', size)
|
refreshView()
|
ElMessage({
|
message: 'Switch Size Success',
|
type: 'success'
|
})
|
};
|
</script>
|
|
<style lang='scss' scoped>
|
.size-icon--style {
|
font-size: 18px;
|
line-height: 50px;
|
padding-right: 7px;
|
}
|
</style>
|
