57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
|
<div>
|
|
<img :src="icon" alt="">
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item :disabled="theme==='dark'" command="dark">
|
|
暗色
|
|
</el-dropdown-item>
|
|
<el-dropdown-item :disabled="theme==='light'" command="light">
|
|
亮色
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
theme() {
|
|
return this.$store.getters.theme
|
|
},
|
|
icon(){
|
|
return require(`../../assets/layout/${this.theme}/switch-color.png`)
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
link:null
|
|
}
|
|
},
|
|
methods: {
|
|
handleSetLanguage(theme) {
|
|
this.$store.dispatch('app/setTheme', theme)
|
|
if(this.theme=='dark'){
|
|
document.head.removeChild(this.link);
|
|
return;
|
|
}
|
|
|
|
if (this.theme == 'light') {
|
|
const link = document.createElement("link");
|
|
link.rel = "stylesheet";
|
|
link.href = this.getLinkHref();
|
|
this.link = link
|
|
document.head.appendChild(link);
|
|
}
|
|
},
|
|
getLinkHref() {
|
|
const href =
|
|
document.head.querySelector("link[rel=stylesheet][href*=css]").href ||
|
|
"";
|
|
return href.replace(/[^\/]+.css$/, "light.css");
|
|
},
|
|
}
|
|
}
|
|
</script>
|