vue脚手架和elementUI的安装就不赘述了,直奔主题,怎么完成vue项目的明暗两种主题切换?
查看elementUI的文档暗黑模式 | Element Plus,我们只需要在index.html的html标签中新增一个class="dark"的属性即可将主题切换成暗黑模式,但是加上开关控制两种模式切换如何进行?
第一步,查看Vueus:useDark | VueUse关于主题切换的按钮:
第二步,查看源码:
从源码中我们发现,他调用了vueuse的内置方法:useToggle,并传入了一个对象 isDark,再追溯到这个isDark导入的文件:
isDark这个对象的由来就有了,开始写代码:
在项目的静态目录assets下的js目录中新增dark.js复制上述的isDark代码
import { useDark } from '@vueuse/core'
export const isDark = useDark({
storageKey: 'vitepress-theme-appearance',
})
在需要切换主题的组件TopLable.vue中,导入useToggle内置方法和isDark对象:
<template>
<div class="env-box" style="height: 100%;width:330px">
<el-switch v-model="isDark" size="large" inline-prompt>
<template #active-action>
<el-icon>
<MoonNight />
</el-icon>
</template>
<template #inactive-action>
<el-icon>
<Sunny />
</el-icon>
</template>
</el-switch>
</div>
</template>
<script>
import { useToggle } from '@vueuse/core';
import { isDark } from '@/assets/js/dark';
const toggleDark = useToggle(isDark);
export default {
components: {},
props: {},
emit: [],
data() {
return {
isDark: isDark,
};
},
watch: {},
computed: {
},
methods: {
},
created() {
},
mounted() {
}
}
</script>
<style scoped>
</style>
swithc开关绑定的对象是我们导入的isDark对象,在切换开关时isDark的属性也随之更改,传入内置函数的值也会随之更改,整个项目的主题就跟着更改:
可以看到用到elementui的组件会随着主题自动切换字体和组件的颜色,其他的没有使用的组件的则是固定的,需要后期手动优化一下。
总结一下
1、在indexl.html中新增class="drak"属性
2、静态文件assets中新增dark.js文件,调用内置方法useDark,导出isDark对象(当然,你也可以在组件中直接使用useDark,我这里是方便管理新增的一个文件)
3、在需要切换主题的组件中引入内置方法useToggle,引入dark.js文件中的isDarkd对象,并传入useToggle方法中,使用组件Switch开关绑定组件中的isDark属性,切换开关即可