记录--Vue3自定义一个Hooks,实现一键换肤

这篇具有很好参考价值的文章主要介绍了记录--Vue3自定义一个Hooks,实现一键换肤。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--Vue3自定义一个Hooks,实现一键换肤

核心

  • 使用CSS变量, 准备两套CSS颜色, 一套是在 light模式下的颜色,一套是在dark模式下的颜色
  • dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme='dark']的时候, dark模式权重比light低,会一直不起效果
  • 当我们点击 dark 模式的时候, 给 html 设置自定义属性[data-theme='dark']
  • 当我们点击 light 模式的时候, 给 html 设置自定义属性[data-theme='light']
  • 在 dark 模式下, 会匹配到html[data-theme='dark']选择器下的样式
  • 在 light 模式下,由于我们没有设置html[data-theme='light']的方案, 那么他就匹配:root(即html)下的样式

两套样式代码大概如下(列了一部分):

:root {
  --color-body-bg: #ffffff;
  --color-text: #000;
  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
}

html[data-theme='dark'] {
  --color-body-bg: #222222;
  --color-text: #ffffff;
  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
}
然后我们点击的时候,通过
 let theme = 'light'            // light / dark  
 document.documentElement.setAttribute('data-theme', theme)

这样就能实现简单的更换肤色功能了

什么? 你以为这就完了?好戏刚开始

跟随系统颜色

首先利用Window 的 'matchMedia()' 方法返回一个新的 MediaQueryList 对象,表示指定的媒体查询 (en-US)字符串解析后的结果。

如运行媒体查询(max-width: 600px)并在<span>;中显示MediaQueryListmatches属性值。如果视口的宽度小于或等于 600 像素,则输出将为 true,而如果窗口的宽度大于此宽度,则将输出 false。

<span class="mq-value"></span>
let mql = window.matchMedia('(max-width: 600px)');
document.querySelector(".mq-value").innerText = mql.matches; //此时小于或等于600像素时span 里面的结果为false

利用prefers-color-scheme [CSS媒体特性] 用于检测用户是否有将系统的主题色设置为亮色或者暗色。

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

两者相结合

matchMedia()prefers-color-scheme 结合在一起, 我们就可以通过 js 去给系统颜色为dark或 light 的情况下更换对应的 html自定义属性, 即[data-theme='dark'][data-theme='light']

首先,我们先去获取主题颜色, 我们还没设置的时候,就默认是系统颜色, 设置了就把他存储起来,下次直接获取这个颜色

// 获取主题变量
let appearance = ref<string>(localStorage.getItem('appearance') || 'auto')

// 查询当前系统主题颜色
const match = window.matchMedia("(prefers-color-scheme: dark)")

// 如果主题变量为 auto, 则跟随系统主题
if (appearance.value === 'auto') {
    followSystem()
} else {
    document.documentElement.setAttribute('data-theme', appearance.value)
}

function followSystem() {
    // 当前系统颜色是亮色还是暗色 , 设置对应的html[data-theme= 'dark' 或者'light']
    const theme = match.matches ? 'dark' : 'light'
    document.documentElement.setAttribute('data-theme', theme)
}

// 监听系统主题变化,电脑主题发生改变的时候就调用followSystem函数
match.addEventListener('change', followSystem)

封装成一个hooks

暴露出一个 useThemeColor函数, 返回一个对象, 对象里面返回我们的主题变量

/ 获取主题变量
let appearance = ref<string>(localStorage.getItem('appearance') || 'auto')
// 查询当前系统主题颜色
const match:MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
// 监听系统主题变化
match.addEventListener('change', followSystem)

function followSystem() {
    const theme = match.matches ? 'dark' : 'light'
    document.documentElement.setAttribute('data-theme', theme)
}

watchEffect(() => {
// 如果主题变量为 auto, 则跟随系统主题
    if (appearance.value === 'auto') {
        followSystem()
    } else {
        document.documentElement.setAttribute('data-theme', appearance.value)
    }
})


export default function useThemeColor() {
    return {
        appearance,
    }
}

使用hooks

导入我们export出来的函数

import useThemeColor from '../hooks/useThemeColor'

使用函数,注意, 这里返回的 apprance 已经是一个响应式数据了

const { appearance } = useThemeColor()

使用 v-model 绑定apprance,直接使用apprance , 当我们切换颜色的时候, 就会调用watchEffect里面的函数, 达到一键换肤效果

 <div class="item">
     <div class="left">
         <div class="title">外观</div>
     </div>
     <div class="right">
         <select v-model="appearance">
             <option value="auto">{{ "自动" }}</option>
             <option value="light">🌞 {{ "浅色" }}</option>
             <option value="dark">🌚 {{ "深色" }}</option>
         </select>
     </div>
 </div>

本文转载于:

https://juejin.cn/post/7237020208648634429

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--Vue3自定义一个Hooks,实现一键换肤文章来源地址https://www.toymoban.com/news/detail-464725.html

到了这里,关于记录--Vue3自定义一个Hooks,实现一键换肤的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中的hooks

    一、概念 hook 是钩子的意思, hooks 类似于封装公共方法的 js文件,实现功能的重复利用。 hooks   清楚复用功能代码的来源, 清晰易懂 hooks解决 mixin 的问题: mixins  逻辑互相嵌套,数据来源不明,且不能互相传递状态 二、hooks的命名   函数名/文件名,以use开头,形如: useXX

    2024年02月14日
    浏览(38)
  • Vue3学习——hooks

    自定义hook函数 什么是hook?——本质是一个函数把setup函数中使用的Composition API进行封装。 类似于Vue2.x中的minx 自定义hook的优势:复用代码,让setup中的逻辑更清楚容易。 vue页面

    2024年02月22日
    浏览(38)
  • 记录--Vue3+TS(uniapp)手撸一个聊天页面

    最近在自己的小程序中做了一个智能客服,API使用的是云厂商的API,然后聊天页面...嗯,找了一下关于UniApp(vite/ts)版本的好像不多,有一个官方的但其中的其他代码太多了,去看懂再删除那些对我无用的代码不如自己手撸一个,先看效果: 好,下面开始介绍如何一步一步实现

    2024年02月03日
    浏览(59)
  • 如何写一个react自定义的hooks?

    使用过useState,也使用过ahook的useSetState,我们知道useState和useSetState左边赋值的第一个参数是接收初始值的变量和设置变量的方法,这里左边用的是数组解构实现的。所以,这里我们想一下,如何自定义一个hooks,也可以像useState和useSetState那样呢? 按我个人的理解,react自定义

    2024年03月15日
    浏览(40)
  • vue3中的hooks基本使用

    目录  前言: 1.hooks介绍 2.hooks的基本使用 2.1添加删除学生信息的案例 2.2封装监听鼠标位置的hooks 3.总结 hooks在vue中是必会的技巧 ,hooks就是一些可复用的方法,可以随时被引入和调用以实现高内聚低耦合的目标。 vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入,hooks本质是一个

    2024年02月15日
    浏览(43)
  • Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式,最后教给大家自己封装一个时间hooks,直接复用

    Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式 最后教给大家自己封装一个时间hooks,直接复用 1.没有封装,直接使用 假如我们现在其他地方还需要用到这个,那么我们可以把这个方法封装成一个hooks,用以复用 1.在src目录下,新建一个utils文件夹,定义一个

    2024年02月13日
    浏览(39)
  • Vue3 Hooks函数使用及封装思想

    目录 一. 什么是hooks函数? 二、如何封装一个hooks函数 三、Hooks 常用 Demo (1)验证码倒计时 (2)防抖 (3)节流 专业解释:Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。 大白话:将单独功能的js代码抽离出来, 加工成公共函数,从而达到逻辑复用。 在尤大

    2024年02月11日
    浏览(37)
  • vue + less 实现动态主题换肤功能

    在vue项目中(我的是2.6.11版本的)使用less做到切换主题肤色。话不多说,直接开始。 我这里的项目是2.6.11版本的 安装一些less的插件 路径: src assets style theme 翻译:theme 的中文就是主题 注意点:考虑到切换样式也是样式中的,所以放在style里面,当然, 你可以放在任意位置

    2024年02月12日
    浏览(35)
  • Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能

    记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。 效果如下: 终端下输入: 起好项目的名称,然后一路回车即可。 至此Vue3的项目已经搭建完毕,打开http://127.0.0.1:5173/就可以看到项目的默认首页了。 安装Naive UI依赖库 然后我们根据官方出的配置对项目进行

    2024年02月12日
    浏览(42)
  • Vue3 - hooks 功能模块抽离示例(项目开发常用)

    在 vue3 项目开发中,功能模块或页面 / 组件逻辑都避免不了 hooks,充分利用它会使项目代码耦合较低、复用性更强、易维护等。 本文 提供 vue3 真实项目开发中,最常见的 hooks 功能抽离示例, 按照此示例,可进行更多场景的举一反三。 新手小白一看就懂,秒知 hooks 的概念和

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包