Hooks封装前端主题

主题效果

::: block-1 在VueUse官网中有这样一个效果,就是点击切换按钮,切换页面主题,由白天切换到黑夜。 :::

今天呢我们封装一个简易前端主题Hook,主要分享其中的实现原理。

封装Hooks

准备两个主题样式

js 复制代码
export default {
    fontSize: '20px',
    Color: '#f90',
    backgroundColor: '#eee'
}
themeday.js
js 复制代码
export default {
    fontSize: '20px',
    Color: '#fff',
    backgroundColor: '#333',
}
themedark.js

新建一个hook文件夹,在hook文件夹中新建theme.ts

ts 复制代码
import { ref, type Ref } from 'vue';

// 定义你的主题类型  
interface ThemeType {
    fontSize?: string;
    Color?: string;
    backgroundColor?: string;
}

// 定义你的响应式引用类型  
type ThemedRef = Ref<ThemeType | undefined>;

// 导入你的主题对象  
import themeday from '../utils/themeday.js';
import themedark from '../utils/themedark.js';

// 初始化你的响应式引用  
let Theme: ThemedRef = ref(themeday as ThemeType);

export function useTheme() {
    let Localtheme = localStorage.getItem('theme');
    Theme.value = Localtheme ? JSON.parse(Localtheme) : themeday;

    const changeday = () => {
        Theme.value = themeday;
        localStorage.setItem('theme', JSON.stringify(themeday));
    };
    const changedark = () => {
        Theme.value = themedark;
        localStorage.setItem('theme', JSON.stringify(themedark));
    };

    // 为返回的对象添加类型注释  
    return { Theme, changeday, changedark } as { Theme: ThemedRef; changeday: () => void; changedark: () => void };
}

因为页面会刷新,所以使用localstorage把主题存入,这样切换主题后,即使页面刷新主题也不会再改变。

组件中使用

在组件中引入useTheme

html 复制代码
<template>
   <div>123123123</div>
   <button @click="changeday" style="width: 100px; height: 50px;margin-top: 100px;">明亮模式</button>
   <button @click="changedark" style="width: 100px; height: 50px;">黑暗模式</button>
</template>

<script setup lang="ts">
import { useTheme } from '@/hook/theme'
const { Theme, changeday, changedark } = useTheme()
</script>

引入成功之后该怎样修改页面样式呢?别忘了vue内置指令有一个v-bind 可以动态绑定元素,在js中可以使用,css也可以使用。

css 复制代码
<style scoped lang="scss">
div {
   width: 100px;
   height: 100px;
   border: 1px solid #ccc;
   background-color: v-bind("Theme.backgroundColor");
   font-size: v-bind("Theme.fontSize");
   color: v-bind("Theme.Color");
}
</style>

效果

谢谢观看~

相关推荐
乐闻x5 分钟前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
遇到困难睡大觉哈哈16 分钟前
JavaScript面向对象
开发语言·javascript·ecmascript
檀越剑指大厂19 分钟前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶21 分钟前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam23 分钟前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑24 分钟前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen24 分钟前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈25 分钟前
前端应用界面的展示与优化(记录)
前端
多多*1 小时前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
ᥬ 小月亮1 小时前
Layui表格的分页下拉框新增“全部”选项
android·javascript·layui