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.
63 lines
2.7 KiB
63 lines
2.7 KiB
6 months ago
|
<template>
|
||
|
|
<el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
|
||
|
|
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
|
||
|
|
<el-button :size="state.size.size" icon="Opportunity" circle></el-button>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
|
||
|
|
<!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
|
||
|
|
<el-tooltip effect="dark" :content="t(item.i18n)" placement="left">
|
||
|
|
<component class="icon" :is="item.icon"></component>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item> -->
|
||
|
|
|
||
|
|
<el-dropdown-item @click="changeStyle('plainb')">
|
||
|
|
<el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<Sunset />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeStyle('plain')">
|
||
|
|
<el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<Sunset />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeStyle('light')">
|
||
|
|
<el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<Sunny />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeStyle('dark')">
|
||
|
|
<el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<MoonNight />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { onMounted } from "vue";
|
||
|
|
import { Styles } from "noob-mengyxu";
|
||
|
|
import { useI18n } from "vue3-i18n";
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
|
||
|
|
const changeStyle = type => {
|
||
|
|
commit('updateState', ['style', Styles[type]]);
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped></style>
|