配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码switch-theme 子组件<template> <div class="switch-theme"> <el-radio-group v-model="radio" @change="switchTheme"> <el-radio label="">经典</el-radio> <el-radio .
原创
2023-05-10 10:09:37
89阅读
效果如图： 源代码：<template> <div :class="[`son${temp}`]" class="demo3"> 这是四点零八分的北京<br/> 一片手的海浪翻动<br/> 这是四点零八分的北京<br/> 一声雄伟的汽笛长鸣<br/> 北京车站高大的建筑<br/>
原创
2022-10-15 07:08:14
156阅读
首先，在assets下css里创建了两个文件，一个theme.less，就是控制样式的函数，一个color.less，用来调用函数传值。// theme.less文件
// 实现换肤的样式函数
/*
1.主色调，整体项目的主要颜色。
2.首页的背景颜色。
3.字体颜色。主要是和主色调来配合使用。
4.表格滑过的颜色。
5.表格选中的颜色。
6/7.首
原创
2023-05-19 15:19:04
346阅读
应产品的要求，做人生中的第一次换肤项目，在没做之前，确实觉得挺没有头绪的，所以就只能借助于百度啊，然后发现其实element自带的就有换肤功能，虽然看了很多别人的文章，但是想自己写一下加深印象。 一、项目搭建 第一步肯定是根据命令行生成对应的项目框架，然后安装element，根据需求引入自己需要的eleme
转载
2024-05-13 09:25:19
536阅读
VUE+ElementUI项目换肤功能一、固定多套主题换肤设置页面 （views/layout.vue）themes.js (@/utils/themes)main.jscss相关结构及内容index.css (css 入口文件)dark.css （主题文件）二、Element-UI动态换肤注：获取element-ui的版本号的目的是为了锁定版本，避免将来Element升级时受到非兼容性更新的影
转载
2024-03-23 11:37:00
1276阅读
该一键换肤只是定义好几个颜色，并进行简单的切换。在src下的assets文件下面定义一个css文件夹，在对应的文件里面定义_handle.scss和_themes.scss文件，如下：image.png2.在_themes.scss文件里面定义好需要用到的几个样式。如下：/**
* _themes.scss
* 当HTML的data-theme为blue时，样式引用blue
* dat
vue3出来有一段时间了，可能还有很大一部分小伙伴们对vue3还处于一个朦胧的状态，不知道到底相比vue2，到底有哪些改变。在使用上，又有哪些不同。那么，今天，我们就来说叨说叨，vue3相比vue2，到底做了哪些改变vue3做了哪些改变1、源码vue3源码组织方式，由vue2的flow改成了vue3的typescriptvue3移除了一些不常用的api，如inline-template，filte
Vite
先让我说几句废话。在写本文时 Vite 没有提供 Vue2 的创建方式。相信有些开发者还没开始学 Vue3，但又想尝尝 Vite。那可以参考本文的进食方式。如果心急的话，“0、简介” 可以跳过。0、简介在写本文时，Vite 默认不提供 Vue2 项目的创建方式。使用 Vite 创建出来的 Vue 项目，暂时都是 Vue3 的。Vite 是构建工具的高阶
Vue动态样式实现方式前言本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳。 如果亲爱的读者们需要，后续会更新Vue3的动态样式方法或者使用TypeScript来实现。CSS动态样式 一般用于设置某个字段根据状态显示不同的样式。 比如 字段A，平时返回0，正常显示字段黑色；返回1时，显示异常，文字颜色为红色Vue动态样式实现方式
:style 动态设置style行内样式，优先级最高
转载
2024-04-01 22:06:32
62阅读
没想到隔了这么久才来更新。用vue做简历，不是非常适合，为什么呢。因为简历没什么数据上的操作，一般都是静态的内容。不过都说了用Vue来做，也只能强行续命了。这里是我做好的成品 非一般简历由于未涉及页面跳转，所以没有vue-router想要实现如网页中的功能，首先我们要使用fullpage.js插件这也是jquery的插件之一，官网地址 他可以让我们的页面实习全屏滚动效果。本来
转载
2024-01-11 14:27:34
70阅读
前言现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI[2]，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.其实之前就想了解和实现 “一键换肤” 功能，但是由于种种原因一直拖到了现在. skin.gif
CSS 样式覆盖实现核心通过切换 css 选择器的方式实现主题样式的切换.在组件中保留不变的样式，将需要变化的样式进行抽离提供多种样式
在vue项目中通常会给style标签加上scope属性，以此来实现样式的私有化，避免全局污染。 但有的时候这个属性又会带来麻烦：当引入第三方组件且需要修改其样式时，通常出现没有修改成功的情况一、scope实现私有化样式的原理通过给DOM元素结构上以及css样式上添加一个不重复的标记，来保证其唯一性，以此达到样式的私有化例如：当使用第三方插件elementui的button、dialog组件，并在s
a { color:Black; } $(function () { //读取保存的cookie里面的css var css = $.co
原创
2023-04-27 11:48:52
109阅读
一 换肤基本的换肤功能实现选中皮肤保存至系统偏好// 记录用户选中的皮肤
[[NSUserDefaults standardUserDefaults] setObject:skinColor forKey:@"skinColor"];
[[NSUserDefaults standardUserDefaults] synchronize];抽取SkinTools单例，简化视图控制器的皮肤管理
转载
2023-12-01 12:17:59
80阅读
一、概述由于Android 没有提供一套统一的换肤机制，我猜可能是因为国外更注重功能和体验的原因所以国内如果要做一个漂亮的换肤方案，需要自己去实现。目前换肤的方法大概有三种方案：（1）把皮肤资源文件内置于应用程序Apk的资源目录下，这种方案最简单，但是导致apk安装包比会比比较大，而且不好管理（2）将皮肤资源文件打包成zip的资源文件方式提供，该方法也比较多被采用。（3）将皮肤图片资源以独立的Ap
转载
2023-05-18 11:10:05
235阅读
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
原创
2013-04-07 19:28:00
345阅读
一键换肤有两种方法可以 第一种是通过CSS3 filter(滤镜) 属性 在App.vue里面直接写上html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
fi
转载
2024-05-28 10:15:38
76阅读
目录方法一：动态修改全局CSS变量方法二：切换主题CSS文件方法三：切换顶级CSS类名方法一：动态修改全局CSS变量1. 在全局c
原创
2022-07-12 16:16:04
676阅读
