基于vue3.0和element-plus的组件库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

32 lines
1.2 KiB

<template>
<el-tooltip effect="dark" :content="t('head.size')" placement="left">
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button icon="Switch" :size="state.size.size" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeSize('small')">{{ t('head.small') }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('normal')">{{ t('head.normal') }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('large')">{{ t('head.large') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Size } from "noob-mengyxu";
const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const changeSize = type => {
commit('updateState', ['size', Size[type]])
commit('initSize', [window.innerHeight, window.innerWidth]);
}
onMounted(() => { });
</script>
<style lang="scss" scoped></style>