主题切换实现（vue-less）

news2024/11/29 2:36:36

介绍

  1. 本文适合黑白切换或者主题样式偏少的（建议：2-10种）；主题越多，样式会越多。理论上无限套。
  2. 本文适合已经写好了一套主题，然后需求增加第二套或者多套主题（最好小于10套，当然也可以更多，但是样式也会更多）
  3. 本文以 vue + vue-cli2.x + element-ui +vuex举例

实现

  1. 您需要实现全局样式文件
    1）在/src/main.js引入全局样式文件；如果有使用插件实现全局样式引入的则，只需要确保你的全局样式文件可以覆盖掉 UI 组件的样式

    import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

import "./styles/index.less";

new Vue({
  render: h => h(App),
  data: {
	eventHub: new Vue()
  }
}).$mount('#app');

    2）个人建议在 src文件夹下创建一个 styles文件夹来管理全局样式。因为这块可以使用less的mixin来抽离成样式组件。
    3）styles最终如下图集成模式为下图
    在这里插入图片描述

  2. 在 styles 文件夹中增加 index.less、theme.less、allVar.js、allVar.less 四个文件；theme、components两个文件夹。（如上图）
    1）index.less；主入口

    @import './theme.less';

    2）theme.less； 负责引入主题中的index.less文件

    @import './theme/White/index.less'; // 白色主题
@import './theme/Black/index.less'; // 黑色主题

    3）allVar.js；你的所有主题都需要在这里引入，主要是负责js中使用less变量（颜色、字体大小等）而存在的

    import black from '@/styles/anHui-new/theme/Black/var.less';
import white from '@/styles/anHui-new/theme/White/var.less';
// 获取 less 变量颜色
export default {
	black,
	white
}

    4）allVar.less；集合所有主题中的变量文件，如果后续需要在页面内使用主题变量的话（非常不建议在页面内使用！因为会使后续增加主题提高难度！）

    @import './theme/Black/var.less';
@import './theme/White/var.less';

  3. 以黑白两种主题来介绍；
    1）src/styles/theme中增加 Black 和 White 两个文件夹；并且同时增加 index.less 和 var.less文件；建议在文件夹中再次增加components文件夹；如下图
    在这里插入图片描述
    2）此时theme中每一个文件夹则是一种主题色的配置；我们以黑色 Black （style/theme/Black） 来举例子：
    （1）Black/index.less；

    @import './var.less'; // 引入当前主题的变量
@import '../../components/FontColor/index.less'; // 全局引入修改字体颜色的less方法（mixin）
@import '../../components/Select/index.less'; // 引入下拉框的less方法（mixin实现）
.theme-black-731514100-random {
	.el-select-dropdown(@select-bg-color: @black-select-bg-color, @select-border-color: @black-select-border-color);
}

    （2）Black/var.less；命名规范建议以主题色为开头（比如@black-xxxxx；@white-xxxxx）

    // 基础色
@black-base-color: #0080FF;
@black-base-bg-pop-color: rgba(0, 13, 26, .8);

// 下拉框
@black-select-border-color: #00D5FF;
@black-select-bg-color: @black-base-bg-pop-color;

:export {
  base-color: @black-base-color;
  base-bg-pop-color: @black-base-bg-pop-color;
}

    温馨提示1：上文中的 :export 为less文件的导出变量；可以直接在 js 中使用颜色；（直接import xxx from 'styles/theme/Black/var.less’即可看到已经编译好的对象）
    温馨提示2：目前没有发现可以直接导出当前less文件全部变量。只能自己手动导出变量；
    温馨提示3：导出变量一定要与上面一样；因为在vuex可以直接切换主题名字进行切换主题，到时候选取的变量名要保持一致！

    3）此时你会发现我引入了 components 中的两个 less 组件内容；那么我们开始介绍这两个组件；
    （1）切换到 components 目录（src/styles/components）;增加两个文件夹：Select、FontColor；文件夹中都含有个index.less；如下图：
    在这里插入图片描述
    （2）FontColor和Select都是使用less的mixin抽成为方法了；如果不了解的话可以去 less 官网看看 mixin 如何使用
    （3）FontColor/index.less；修改字体颜色的

    .changeFontColor(@color) {
	color: @color;
	a,
	span,
	div,
	label,
	i {
		color: @color;
	}
}
.changeFontColorImportant(@color) {
	color: @color !important;
  	a,
	span,
	div,
	label,
	i {
		color: @color !important;
  	}
}

    （4）Select/index.less；全局修改下拉框样式组件

    .el-select-activeClass(@select-border-color) {
	background: transparent !important;
	.changeFontColor(@select-border-color); // 这个是因为外部引入了 FontColor 组件的原因；
}

.el-select-dropdown(@select-bg-color, @select-border-color) {
	background: @select-bg-color;
	border: 1px solid @select-border-color;

	.popper__arrow::after {
		border-bottom-color: @select-border-color;
	}

	.selected {
		.el-select-activeClass(@select-border-color)
	}

	.hover {
		.el-select-activeClass(@select-border-color)
	}
}

  4. 挂载
    （1）增加文件：src/mixin/theme.js

    import { mapGetters, mapMutations } from 'vuex';

export default {
  	computed: {
  	 	...mapGetters('style', ['theme'])
  	},
 	watch: {
	 	theme() {
	   		this.setTheme();
	   	}
 	},
	mounted() {
	  	this.setTheme()
	},
	methods: {
		 ...mapMutations('style', ['changeTheme']),
 		 setTheme() {
 	 		 document.getElementsByTagName('body')[0].className = `theme-${this.theme}-731514100-random`
	 	 },
  	}
}

    （2）在你页面的主入口混入（mixins）src/mixin/theme.js这个文件；比如说（app.vue中）

    <template>
	<div id="app" style="height:100%">
		<router-view></router-view>
	</div>
</template>

<script>
import themeMixin from "@/mixin/theme.js";
export default {
	name: 'App',
	mixins: [
		/** themeMixin: 主题挂载
 	 	 * @computed theme
 	 	 * @method setTheme
 	 	 * @watch theme
 	 	 */
		themeMixin
	],
}
</script>

  5. vuex状态管理数据，实现切换主题功能，实现获取less变量值功能；
    （1）使用vuex状态管理；创建文件：src/store/modules/style.js；此处使用到了命名空间，如果对命名空间不理解的话可以去vuex官网看看。（namespaced: true为开启命名空间）

    import style from '@/styles/anHui-new/allVar.js';
export default {
  namespaced: true,
  state: {
    themeList: [
      {
        type: 'white',
        style: style.white
      },
      {
        type: 'black',
        style: style.black
      }
    ],
    theme: 'black'
  },
  mutations: {
    changeTheme(state, data) { // 改变主题调用此函数；唯一参数：传递改变为哪个主题、或者在第一个和第二个主题切换。
      state.theme = data || state.themeList.reduce((pre, next, i, arr) => {
        if (pre) return pre;
        if (next.type !== state.theme) pre = next.type;
        return pre
      }, void 0)
    }
  },
  getters: {
    theme: (state) => state.theme, // 获取当前主题是哪个
    globalColor: (state) => (style[state.theme]) // 会返回你定义的对象-返回当前主题的变量颜色
  }
}

    温馨提示：上面这个文件需要挂载到vuex里面去；如果已经挂载过了则不需要走以下不走了；实现如下：
    （2）挂载到vuex中（src/store/index.js）

    import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
let moduleInclude = {
  state: {
  },
  actions: {
  },
  mutations: {
  }
}

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const name = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1'),
    value = modulesFiles(modulePath);
  modules[name] = value.default;
  return modules;
}, {})

export default new Vuex.Store({
  modules: {
    moduleInclude,
    ...modules
  }
})

    （3）在 src/main.js 中挂到 vue 中

    import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'; // 这个是挂载vuex的
import "./styles/index.less";

new Vue({
  store,
  render: h => h(App),
  data: {
	eventHub: new Vue()
  }
}).$mount('#app');

  6. 引用示例

    <template>
 	<div>
		<button @click="changeTheme()">changeTheme</button>
		 <!-- 这里写你的下拉框组件去测试吧 -->
	</div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import themeMixin from "@/mixin/theme.js";
export default {
  data() {
    return {
    };
  },
  mixins: [
    /** themeMixin: 主题挂载
     * @computed theme
     * @method setTheme
     * @watch theme
     */
    themeMixin,
  ],
  computed: {
    ...mapGetters("style", ["theme"]),
  },
  methods: {
    ...mapMutations("style", ["changeTheme"])
  },
};
</script>

  7. 此时如果你完成了以上步骤，则可以看到你的下拉框可以被覆盖颜色了
    在这里插入图片描述
    在这里插入图片描述

总结

  1. 功能持续加强版：可集成一个项目模块，专门来配置项目主题色。最后生成样式配置文件。（src/styles/theme/xxxxxx: index.less 和 var.less）；
  2. 切换主题这功能好像可以使用css-vars-ponyfill这个插件更好的去实现样；有兴趣的小伙伴可以去研究一下（期待你的回信）；css-vars-ponyfill官网地址
  3. 如果你有更好的实现方案，可以一起讨论~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

免费送30张可视化大屏，跳过复杂代码，轻松缔造可视化智慧校园

免费送30张可视化大屏，跳过复杂代码，轻松缔造可视化智慧校园

“现在老师和学校管理的信息化做的特别差&#xff01;” 。 当我做智慧校园软硬件的老同学和我这么说时&#xff0c;我惊呆了。他认为现在的大多数开发商大部分打着“智慧校园”的旗号&#xff0c;但是所做的系统仅仅是门禁刷卡&#xff0c;或者校园一卡通系统&#xff0c;请问…
阅读更多...
视觉检测系统是怎么检测尺寸的？

视觉检测系统是怎么检测尺寸的？

随着科学技术的进步和市场通知的发展越来越多的自动化机器正在代替人工。 视觉检查系统也是如此。 视觉检测系统在许多行业的应用越来越热衷。 如工业五金. 3c电子.纺织等行业。 那么&#xff0c;具体而言&#xff0c;什么是视觉尺寸检测呢&#xff1f; 1 .什么是尺寸检查&am…
阅读更多...
【RabbitMQ】初识消息中间件MQ

【RabbitMQ】初识消息中间件MQ

目录 一、什么是MQ 二、MQ的优缺点 1、MQ的优点 1.应用解耦 2.削峰填谷 3.异步提速 2、MQ的缺点 1.可用性低 2.系统复杂度高 3.数据一致性问题 三、MQ使用场景 四、常见的MQ 一、什么是MQ MQ&#xff08;Message Queue&#xff09;&#xff1a;消息队列&#xff0c…
阅读更多...
为什么多线程读写 shared_ptr 要加锁？

为什么多线程读写 shared_ptr 要加锁？

陈硕&#xff08;giantchen_AT_gmail_DOT_com&#xff09; 2012-01-28 我在《Linux 多线程服务端编程&#xff1a;使用 muduo C 网络库》第 1.9 节“再论 shared_ptr 的线程安全”中写道&#xff1a; &#xff08;shared_ptr&#xff09;的引用计数本身是安全且无锁的&#…
阅读更多...
git仓库与分支

git仓库与分支

仓库使用 第一次进入需要创建一个仓库 按照教程绑定邮箱可密码&#xff0c;再创建readme文件上传到仓库初始化 git push 详解 git push origin master:xiaoxu# 如下为远程仓库的详解https://gitee.com/fireapproval/xiaoxu.git//其中xiaoxu为仓库//如上的可视化界面中bolen为…
阅读更多...
伺服阀放大器接线设置

伺服阀放大器接线设置

端子 功能描述 1 PWR 外部电源输入&#xff0c;24VDC 2 PWR- 外部电源输入&#xff0c;24VDC 3 ENA 低电平使能 0<U<1.5V&#xff0c;放大器工作&#xff0c;绿灯常亮&#xff1b;2.5V<U<UB&#xff0c;放大器不工作&#xff0c;红灯常亮&#xff1b; 4 N.C. 不…
阅读更多...
【关于Linux中----信号量及其使用场景】

【关于Linux中----信号量及其使用场景】

文章目录一、解释信号量1.1 概念的引入1.2 信号量操作和使用接口二、信号量使用场景2.1 引入环形队列&&生产消费问题2.2 代码实现2.3 对于多生产多消费的情况2.4 申请信号量和加锁的顺序问题2.5 多生产多消费的意义一、解释信号量 1.1 概念的引入 我们知道&#xff0…
阅读更多...
python uiautomator2 环境搭建和基本使用

python uiautomator2 环境搭建和基本使用

安装 adb安装和配置 可以百度或者看看这个https://blog.csdn.net/weixin_37600187/article/details/127987889 安装uiautomator2 pip install -i https://mirrors.aliyun.com/pypi/simple -U uiautomator2安装 weditor&#xff08;一般情况会报错&#xff09; pip install…
阅读更多...
C#程序设计——面向对象编程基础，设计一个Windows应用程序，模拟一个简单的银行账户管理系统。实现创建账户、取款、存款和查询余额的模拟操作。

C#程序设计——面向对象编程基础，设计一个Windows应用程序，模拟一个简单的银行账户管理系统。实现创建账户、取款、存款和查询余额的模拟操作。

一、实验目的 1、理解简单程序中的面向对象思想的应用 2、掌握C#的定义类和创建对象的方法 3、理解方法中参数的传递 二、实验内容 1、设计一个Windows应用程序&#xff0c;模拟一个简单的银行账户管理系统。实现创建账户、取款、存款和查询余额的模拟操…
阅读更多...
序列比对算法

序列比对算法

案例问题&#xff1a;假设有两个序列&#xff1a;ATGCG 和 ACCG&#xff0c;如何求得它们的最佳匹配方案。 1. Needleman-Wunsch 算法 原理是动态规划&#xff0c;是一个全局比对算法 算法求解步骤&#xff1a; &#xff08;1&#xff09;在它们前面各加上一个 ‘-’ -ATGC…
阅读更多...
2023 “认证杯”数学中国数学建模C 题 心脏危险事件 详细思路

2023 “认证杯”数学中国数学建模C 题 心脏危险事件 详细思路

2023年认证杯”数学中国数学建模如期开赛&#xff0c;本次比赛与妈杯&#xff0c;泰迪杯时间有点冲突。因此&#xff0c;个人精力有限&#xff0c;有些不可避免地错误欢迎大家指出。为了大家更方便的选题&#xff0c;我将为大家带来C题的详细解析&#xff0c;以方便大家建模分析…
阅读更多...
如何有效利用文旅资源

如何有效利用文旅资源

文旅产业是当今世界发展最迅速的行业之一&#xff0c;文化和旅游业的融合已经成为文旅产业发展的趋势。众所周知&#xff0c;文旅资源是我国的宝贵财富&#xff0c;文化遗产、旅游胜地等都是国宝级的文旅资源&#xff0c;从古老的文化遗产到现代的旅游景点&#xff0c;无不体现…
阅读更多...
近期CTF web

近期CTF web

文章目录NKCTFbaby_phpez_phphard_phpeasy_pmseasy_cmsWebPageTestxiaopiCTFshow愚人赛easy_signineasy_sstiez_flask被遗忘的反序列化easy_php杭师大CTFfindmeez_javaeznodeNKCTF baby_php <?phperror_reporting(0);class Welcome{public $name;public $arg oww!man!!;…
阅读更多...
【八】springboot启动源码 - finishRefresh

【八】springboot启动源码 - finishRefresh

Last step: publish corresponding event. clearResourceCaches initLifecycleProcessor Initialize lifecycle processor for this context. 从IOC获取LifecycleProcessor设置到applicationContext中,如果从IOC中获取不到会创建DefaultLifecycleProcessor并注册到IOC中 get…
阅读更多...
【能力提升】SQL Server常见问题介绍及快速解决建议

【能力提升】SQL Server常见问题介绍及快速解决建议

前言 本文旨在帮助SQL Server数据库的使用人员了解常见的问题&#xff0c;及快速解决这些问题。这些问题是数据库的常规管理问题&#xff0c;对于很多对数据库没有深入了解的朋友提供一个大概的常见问题框架。 下面一些问题是在近千家数据库用户诊断时发现的常规问题&#xff0…
阅读更多...
用Abp实现找回密码和密码强制过期策略

用Abp实现找回密码和密码强制过期策略

文章目录重置密码找回密码发送验证码校验验证码发送重置密码链接创建接口密码强制过期策略改写接口Vue网页端开发重置密码页面忘记密码控件密码过期提示项目地址用户找回密码&#xff0c;确切地说是 重置密码&#xff0c;为了保证用户账号安全&#xff0c;原始密码将不再以明文…
阅读更多...
一篇文章搞定《动手学深度学习》-（李牧）PyTorch版本的所有内容

一篇文章搞定《动手学深度学习》-（李牧）PyTorch版本的所有内容

目录 目录 简介 阅读指南 1. 深度学习简介 2. 预备知识 3. 深度学习基础 4. 深度学习计算 5. 卷积神经网络 6. 循环神经网络 7. 优化算法 8. 计算性能 9. 计算机视觉 10. 自然语言处理 环境 参考&#xff08;大家可以在这里下载代码&#xff09; 原书地址&#…
阅读更多...
优思学院｜精益生产和精益管理的区别

优思学院｜精益生产和精益管理的区别

精益生产和精益管理&#xff0c;这两个概念我们或多或少都听说过。但是&#xff0c;你是否真的明白这两个概念的区别&#xff1f;或者你是否也像我一样&#xff0c;之前把这两个概念混淆在一起呢&#xff1f;今天&#xff0c;我要和大家分享的是&#xff0c;精益生产和精益管理…
阅读更多...
用Flutter开发一款音乐App（从0到1开发一款音乐App）

用Flutter开发一款音乐App（从0到1开发一款音乐App）

Flutter Music_Listener(flutter音乐播放器) Flutter version 3.9 项目介绍 1、项目整体基于getxretrofitdiojsonserialize开发 2、封装通用控制器BaseController&#xff0c;类似jetpack mvvm框架中的BaseViemodel 3、封装基础无状态基类BaseStatelessWidget&#xff0c;结合…
阅读更多...
jmap执行失败了，怎么获取heapdump？

jmap执行失败了，怎么获取heapdump？

在之前的OOM问题复盘中&#xff0c;我们添加了jmap脚本来自动dump内存现场&#xff0c;方便排查OOM问题。 但当我反复模拟OOM场景测试时&#xff0c;发现jmap有时可以dump成功&#xff0c;有时会报错&#xff0c;如下&#xff1a; 经过网上一顿搜索&#xff0c;发现两种原因可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023