forked from mengyxu/noob-components
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.
75 lines
2.5 KiB
75 lines
2.5 KiB
<template> |
|
<el-tooltip |
|
effect="dark" |
|
:content="t('head.changeStyle')" |
|
placement="bottom" |
|
:show-after="0" |
|
:hide-after="10" |
|
transition="" |
|
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }" |
|
popper-class="non-interactive-tooltip" |
|
> |
|
<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> |
|
.non-interactive-tooltip { |
|
pointer-events: none !important; |
|
} |
|
</style>
|
|
|