其他
在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上运行。
随着应用程序的启动和运行,我们现在可以创建CSS。在 public
目录内创建一个 css/dark.css
文件,这是我们将在黑暗模式环境中存储所有CSS代码的地方。
在dark.css文件中添加以下代码:
:root {
--text: #ffffff;
--background: #1d1d23;
}
body {
background-color: var(--background) ;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a {
color: var(--text) ;
}
现在将在head中创建一个link标签将其设置为我们创建的 dark.css
文件,以便可以应用在此定义的所有样式。
我们将使用Javascript类来执行此操作,在src目录中创建 src/theme.js
文件,并添加以下代码:
export default class themeChanger {
/**
* @constructor
*/
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种方法:
_addDarkTheme()
:这会将link标签添加到应用程序的HTML head中。_removeDarkTheme()
:这将删除已添加到HTML head的link标签。_darkThemeSwitch()
:这将切换添加和删除方法,以在我们的HTML head中添加和删除link标签。
我们可以继续在Vue.js组件中使用此方法。
编辑 components/HelloWorld.vue
中的代码,如下所示:
<template>
<h3>Vite is the future of Frontend Developement.</h3>
<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技巧 | 在Vue3中使元素在滚动视图时淡入
Vue.js中编写更好的v-for循环的6种技巧
我总结了12个Vue.js开发技巧和窍门
Vue.js嵌套组件生命周期执行顺序
Vue.js中侦听器(watch)的高级用法
免费Vue模板:https://www.wrappixel.com/templates/category/vuejs-templates/
粉丝福利
福利1:课程《程序员成长攻略(价值1998)》获取地址和密码请在公众号中回复关键字:001 福利2:在看+留言,张张会在留言区随机抽取一位认真留言的小伙伴,给他发一个红包奖励
昨晚红包抽奖抽中名单,抽中的找我兑换对应金额微信红包,抽奖程序平台套路,我以为是一个人得50元
- END -
走心的分享更容易被抽中~
开奖时间 次日文末
点赞 + 在看 + 留言
下一个幸运儿就是你
👇