Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。

效果如下：

Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能,vue3,Naive UI,ui,javascript,vue.js,前端

Naive UI + Vue3 项目的搭建

终端下输入：

npm init vue@latest

起好项目的名称，然后一路回车即可。

cd vue3
npm install
npm run dev

至此Vue3的项目已经搭建完毕，打开http://127.0.0.1:5173/就可以看到项目的默认首页了。

安装Naive UI依赖库

npm i -D naive-ui
npm i -D vfonts

然后我们根据官方出的配置对项目进行简单的修改vue3项目下边的main.js

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)
app.mount('#app')

好啦，Naive UI的依赖也安装好了。

实现点击按钮一键切换明暗主题的功能

首先，我们需要从Naive UI中导入darkTheme：

import { darkTheme } from "naive-ui";

然后，我们需要定义一个ref变量来存储按钮的标题：

const theme = ref(null); //主题变量
const themebtntit = ref("暗色主题"); //主体按钮title

接下来，我们需要定义一个函数来切换主题：

const changetheme = () => {
  theme.value = theme.value == null ? darkTheme : null;
  themebtntit.value = themebtntit.value == "亮色主题" ? "暗色主题" : "亮色主题";
};

最后，我们需要在模板中添加一个按钮，并将changetheme函数绑定到按钮的点击事件上：

<n-config-provider :theme="theme">
		<n-button @click="changetheme">
		    {{ themebtntit }}
		</n-button>
    <n-global-style />
  </n-config-provider>
</template>