文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何在Vue Vite应用程序中实现暗/亮模式

2024-04-02 19:55

关注

这篇文章主要为大家展示了“如何在Vue Vite应用程序中实现暗/亮模式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何在Vue Vite应用程序中实现暗/亮模式”这篇文章吧。

在本文中,我将在不使用任何库的情况下将dark\Light模式功能实现到我们的Vue Vite应用程序中。

我们将首先创建一个简单的Vite应用程序,然后为我们的应用程序设置一个简单的用户界面。在创建我们的Vue应用程序之前,我想提到WrapPixel提供的一些很棒的免费Vue模板,它们可以免费下载并用于个人和商业用途。他们可以节省你的时间,因为你可以直接在你的项目中使用他们令人惊叹的用户界面,这将给你的应用程序带来惊人的外观和感觉,所以一定要去看看。

如何在Vue Vite应用程序中实现暗/亮模式

创建一个Vuejs Vite应用程序

要设置Vite应用程序,请打开您的终端并输入以下内容:

npm init vite-app themeswitcher

这个命令将搭建一个新的vite应用程序,然后进入项目目录安装项目依赖项:

cd themeswitcher npm install

安装后,我们现在可以使用 npm run dev 命令运行我们的应用程序:

code . && npm run dev

code . 命令将以VS Code打开我们的应用程序。

我们的应用程序现在将在端口3000上运行。

如何在Vue Vite应用程序中实现暗/亮模式 

随着应用程序的启动和运行,我们现在可以创建CSS。在 public 目录内创建一个  css/dark.css文件,这是我们将在黑暗模式环境中存储所有CSS代码的地方。

在dark.css文件中添加以下代码:

:root {   --text: #ffffff;   --background: #1d1d23; }body {   background-color: var(--background) !important; }h2, h3, h4, h5, h6, h7, p, small, a {   color: var(--text) !important; }

现在将在head中创建一个link标签将其设置为我们创建的 dark.css 文件,以便可以应用在此定义的所有样式。

我们将使用Javascript类来执行此操作,在src目录中创建 src/theme.js 文件,并添加以下代码:

export default class themeChanger {          constructor() {}     _addDarkTheme() {        const darkThemeLinkEl = document.createElement('link')         darkThemeLinkEl.setAttribute('rel', 'stylesheet')         darkThemeLinkEl.setAttribute('href', './css/dark.css')         darkThemeLinkEl.setAttribute('id', 'dark-theme-style')         const docHead = document.querySelector('head')         docHead.append(darkThemeLinkEl)    }    _removeDarkTheme() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         const parentNode = darkThemeLinkEl.parentNode         parentNode.removeChild(darkThemeLinkEl)    }    _darkThemeSwitch() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         if (!darkThemeLinkEl) {             this._addDarkTheme()         } else {             this._removeDarkTheme()         }    }}

我们创建3种方法:

我们可以继续在Vue.js组件中使用此方法。

编辑 components/HelloWorld.vue 中的代码,如下所示:

<template>   <h4>Vite is the future of Frontend Developement.</h4>   <small>Thanks to Evan You</small>   <br />   <button @click="darkThemeSwitch">switch</button> </template> <script> import themeChanger from "../util/theme.js"; export default {   name: "HelloWorld",   props: {     msg: String,   },   data() {     return {       themeChanger: null,     };   },   methods: {     darkThemeSwitch() {       this.themeChanger._darkThemeSwitch();     },   },   created() {     this.themeChanger = new themeChanger();   }, }; </script>

我们引入 themeChanger 类的实例,然后将其存储在Vue.js data实例中。然后,我们创建一个按钮,该按钮将调用我们在 theme.js  文件中创建的 _darkThemeSwitch。

完成此操作后,我们现在可以在应用程序中在明暗模式之间切换。

以上是“如何在Vue Vite应用程序中实现暗/亮模式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯