[Vue 代码模板] Vue3 中使用 Tailwind CSS + NutUI 实现侧边工具栏切换主题

文章归档:https://www.yuque.com/u27599042/coding_star/vzkgy6gvcnpl3u2y

效果示例

image.png
image.png

配置 src 目录别名 @

https://www.yuque.com/u27599042/coding_star/ogu2bhefy1fvahfv

配置 Tailwind CSS

https://www.yuque.com/u27599042/coding_star/yqzi9olphko9ity1

配置 Tailwind CSS 使用暗黑模式的形式

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {// 配置 Tailwind CSS 使用暗黑模式的形式(类名 class="dark")darkMode: 'class',// ...
}

配置 NutUI

https://www.yuque.com/u27599042/coding_star/gumgmgfgi2gzkgpl

ToggleTheme.js

src/components/toolbar/js/ToggleTheme.js

import {computed, ref} from 'vue'// ***************
// * 是否为暗色主题 *
// ***************
const isDark = ref(false)// **********
// * 主题图标 *
// **********
const lightIcon = 'icon-sunbaitian-taiyang'
const darkIcon = 'icon-yueliangxingxing'
export const themeIcon = computed(() =>  isDark.value ? lightIcon : darkIcon)// **********
// * 主题类名 *
// **********
const lightClass = 'light'
const darkClass = 'dark'
export const themeClass = computed(() =>  isDark.value ? darkClass : lightClass)// **********
// * 切换主题 *
// **********
export const toggleTheme = () => {const htmlClassList = document.documentElement.classListif (isDark.value) {isDark.value = !isDark.valuehtmlClassList.remove(darkClass)htmlClassList.add(lightClass)return}isDark.value = !isDark.valuehtmlClassList.remove(lightClass)htmlClassList.add(darkClass)
}

Toolbar 组件

src/components/toolbar/Toolbar.vue

<script setup>
import {ref} from 'vue'
import {RectLeft} from '@nutui/icons-vue'
import {themeIcon, toggleTheme} from "@/components/toolbar/js/ToggleTheme.js";// ************
// * 工具栏状态 *
// ************
const toolbarActive = ref(false)// *****************
// * 切换主题处理函数 *
// *****************
function toggleThemeHandler() {toggleTheme()toolbarActive.value = false
}
</script><template><!-- 可拖拽 --><nut-drag direction="y" :style="{ right: '0px', bottom: '100px' }"><!-- 工具栏 --><nut-fixed-nav class="toolbar" v-model:visible="toolbarActive"><!-- 工具栏按钮 --><template #btn><RectLeft color="#fff"/><span class="iconfont icon-gongjuxiang3 ml-2 text-xl text-gray-100"></span></template><!-- 工具栏列表 --><template #list><ul class="nut-fixed-nav__list"><li class="nut-fixed-nav__list-item"><!-- 切换主题 --><!-- flex-center 为自定义类,不为 tailwind css 中的 --><div class="toggle-theme w-full h-full flex-center" @click="toggleThemeHandler"><span class="iconfont" :class="themeIcon"></span></div></li></ul></template></nut-fixed-nav></nut-drag>
</template><style scoped lang="scss">
.flex-center {display: flex;justify-content: center;align-items: center;
}
</style>

App.vue

src/App.vue

<script setup>
import Toolbar from "@/components/toolbar/Toolbar.vue";
import {themeClass} from "@/components/toolbar/js/ToggleTheme.js";
</script><template><!-- dark: 指定 tailwind css 暗色主题样式 --><div class="app w-screen h-screen bg-gray-100 dark:bg-neutral-800"><!-- 使用 nut-config-provider 配置组件包裹 nut ui 组件,实现 nut ui 主题切换 --><nut-config-provider :theme="themeClass"><!-- nut-cell 直接顶部接着父元素有 margin 塌陷问题 --><div class="h-4"></div><nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell></nut-config-provider></div><!-- 工具栏 --><Toolbar></Toolbar>
</template><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150444.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CAPL编程 - 事件驱动

1 事件概述 CAPL是一种面向过程、由事件驱动的类C语言。 事件驱动针对于顺序执行&#xff0c;其区别如下&#xff1a; 顺序执行&#xff1a;顺序执行流程中&#xff0c;子例程或过程函数按照代码编写顺序逐句执行。 事件驱动&#xff1a;CAPL程序由事件驱动&#xff0c;工程…

11.15 监控目录文件变化

监视对指定目录的更改&#xff0c;并将有关更改的信息打印到控制台&#xff0c;该功能的实现不仅可以在内核层&#xff0c;在应用层同样可以。程序中使用ReadDirectoryChangesW函数来监视目录中的更改&#xff0c;并使用FILE_NOTIFY_INFORMATION结构来获取有关更改的信息。 Re…

Selenium中元素定位方法详细介绍

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

JavaScript实现飞机发射子弹详解(内含源码)

JavaScript实现飞机发射子弹 前言实现过程源码展示源码讲解HTML结构CSS结构js结构 前言 文本主要讲解如何利用JavaScript实现飞机发射子弹&#xff0c;实现过程以及源码讲解。实现效果图如下&#xff1a; 实现过程 首先&#xff0c;找到飞机和子弹的UI图&#xff0c;gif图最…

外贸B2C独立站如何做?

外贸B2C独立站是一种直接向海外消费者销售产品的商业模式。它通常包括建立一个自己的在线商店&#xff0c;通过社交媒体、广告和搜索引擎等渠道吸引流量&#xff0c;并使用国际支付和物流服务来处理订单。以下是一些关于如何建立和运营外贸B2C独立站的建议&#xff1a; 确定目标…

【Android】使用Retrofit2发送异步网络请求的简单案例

添加网络权限到AndroidManifest.xml清单文件 为了让你的Android应用程序能够使用互联网进行通信&#xff0c;你需要在AndroidManifest.xml文件中添加网络权限声明。<uses-permission android:name"android.permission.INTERNET"/> 这个权限应该添加到 Android…

C/C++模板类模板与函数模板区别,以及用法详解

类模板 类模板语法 类模板作用&#xff1a; 建立一个通用类&#xff0c;类中的成员 数据类型可以不具体制定&#xff0c;用一个虚拟的类型来代表。 语法&#xff1a; template<typename T> 类解释&#xff1a; template --- 声明创建模板 typename --- 表面其后面的…

python爬虫概述及简单实践:获取豆瓣电影排行榜

目录 前言 Python爬虫概述 简单实践 - 获取豆瓣电影排行榜 1. 分析目标网页 2. 获取页面内容 3. 解析页面 4. 数据存储 5. 使用代理IP 总结 前言 Python爬虫是指通过程序自动化地对互联网上的信息进行抓取和分析的一种技术。Python作为一门易于学习且强大的编程语言&…

云服务器网络掉包问题分析及解决方案

在互联网领域拥有先进的基础设施和技术&#xff0c;其服务器网络一直以来都备受关注。近期有用户反映云服务器网络掉包问题严重&#xff0c;给用户的网络体验带来了很大的困扰。 我们需要了解什么是网络掉包。网络掉包是指在数据传输过程中&#xff0c;由于网络拥堵、路由不稳…

LabVIEW关于USRPRIO的示例代码

LabVIEW关于USRPRIO的示例代码 USRPRIO 通常以两种方式使用&#xff1a; 1 基于 FPGA 的编程 对于希望修改USRP上的底层FPGA代码以添加自定义DSP模块的应用&#xff0c;请使用USRP示例项目。它可作为构建 USRP RIO 流式处理应用程序的起点&#xff0c;可从“创建项目”对话框…

项目资讯丨轻空间中标连云港市首座“多功能声学综合馆”(EPC)

近日&#xff0c;轻空间&#xff08;江苏&#xff09;膜科技有限公司&#xff08;以下简称“轻空间”&#xff09;成功中标连云港市首座“多功能声学综合馆”项目&#xff0c;这标志着轻空间在新型气膜领域的创新突破技术&#xff0c;再次获得政府机构的高度认可&#xff0c;为…

vue 鼠标移入移出事件执行多次(尤其ie)

mouseover 当一个定点设备&#xff08;通常指鼠标&#xff09;在一个元素本身或者其子元素上移动时&#xff0c;mouseover 事件在该元素上触发。 mouseenter 事件在定点设备&#xff08;通常指鼠标&#xff09;首次移动到元素的激活区域内时&#xff0c;在该元素上触发。 mouse…

TypeScript 泛型及应用

TypeScript 泛型及应用 泛型&#xff08;Generics&#xff09;是 TypeScript 中的一项强大特性&#xff0c;它允许我们在定义函数、类和接口时使用类型参数&#xff0c;从而增加代码的灵活性和重用性。本文将介绍 TypeScript 中泛型的概念、语法以及一些常见的应用场景。 泛型…

IntelliJ IDEA 快捷键 Windows 版本

前言&#xff1a;常用快捷键 IntelliJ IDEA编辑器大受欢迎的原因之一是它的智能提示和丰富的快捷键&#xff0c;在日常开发中熟练的使用快捷键会大大提升开发的效率&#xff0c;本篇文章就笔者日常开发中的总结&#xff0c;把常用的、好用的快捷键做一个列表&#xff0c;方便…

Docker 中 jdk8容器里无法使用 JDK 的 jmap 等命令的问题

一、问题描述 项目部署在 CentOS 服务器上。项目偶尔会出现无响应的情况&#xff0c;这时理所当然要上去用 JDK 相关命令看看堆栈和GC等信息了。 进入 Java 程序所在容器&#xff1a;docekr-compose exec api bash&#xff0c;进入到 api 容器的 bash 终端。 jps 打印 Java …

水声功率放大器在声呐系统中的应用有哪些

水声功率放大器在声呐系统中扮演着重要的角色&#xff0c;其应用涵盖了声呐系统的多个方面。下面就让安泰电子来介绍水声功率放大器在声呐系统中的应用。 发射声波信号&#xff1a;声呐系统通过发射声波信号并接收其回波来探测和测量海洋中的目标物体。水声功率放大器用于放大发…

划片机新手教程:从准备工作到注意事项全解析!

随着科技的飞速发展&#xff0c;划片机已成为半导体行业不可或缺的一部分。对于新手来说&#xff0c;如何正确操作划片机显得尤为重要。以下是新手操作划片机的步骤和建议。 一、准备工作 在开始操作划片机之前&#xff0c;首先需要准备好以下工具和材料&#xff1a; 1. 划片机…

CICD 持续集成与持续交付——gitlab

部署 虚拟机最小需求&#xff1a;4G内存 4核cpu 下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 安装依赖性 [rootcicd1 ~]# yum install -y curl policycoreutils-python openssh-server perl[rootcicd1 ~]# yum install -y gitlab-ce-15.9.3-ce.0…

SQL常见函数整理 —— lead()向下偏移

1. 用法 是在窗口函数中使用的函数&#xff0c;它用于获取当前行的下一行&#xff08;后一行&#xff09;的某个列的值。具体来说&#xff0c;LEAD() 函数可用于查找任何给定行的下一行&#xff08;后一行&#xff09;的值&#xff0c;同时也可控制行数偏移量&#xff08;offse…

创建自定义日志筛选器

Windows的事件查看器中的日志包含了很多信息&#xff0c;但是系统自带的筛选器只能筛选固定的字段和内容。有时候想根据某个事件中的用户名或者IP筛选的时候就没办法了。此时需要创建自定义筛选器来实现。 首先找到希望筛选的日志&#xff0c;调整成详细的XML视图。 这里面就有…