前一段时间完成了一个项目，该项目要求黑夜和白天两种主题色，可以动态的切换。经过多方的查找研究，终于完成。谨以此文在此记录一下。此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识，具体API详参官网https://www.sass.hk/docs/。大概的思路就是给html根标签设置一个data-theme属性，通过js切换data-theme的属性值，sass根据此属性来判断使
转载
2024-10-10 09:08:06
205阅读
文章目录前期准备切换的主题涉及到两种模式： 1、默认主题 2、黑夜主题一、切换主题需求分析二、代码详解1.目录介绍2.切换主题方法代码3.主题的使用4.原项目中的更改1.全局色值都改为变量形式( js的色值从store中取)2.设置scss的16进制变量（踩坑）1.方式1`（错误）`2.方式23.增加配置文件(粗略浏览即可)4.element ui配置文件放在public静态文件中5.chr
转载
2024-09-14 09:37:27
322阅读
目录一、背景二、实现思路 方法1：定义全局的CSS变量 方法2：切换已定义好的css文件 方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)一、背景在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。二、实现思路 方法1：定义全局的CSS变量App.vue：<style>
/* 定义全局的css变量 */
转载
2024-04-15 12:52:08
1651阅读
文章目录前言一、实现原理分析二、scss实现1.theme.scss2.handle.scssscss语法回顾1. @each遍历2. Maps值获取3. 混合指令@mixinscss实现换肤核心逻辑应用于UI库样式修改三、设置主题相关scss为全局变量 前言web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）
前言说起换肤功能，前端应该是非常熟悉了?一般来说换肤的需求分为几种：1. 纯前端，直接在页面前端通过点击自由切换限定的几种主题色，切换之后主题色变量存到本地浏览器2. 在后台配置好色值，传到前端，前端从接口获取主题色在初始化的时候显示对应的主题色3. 前面两者的结合，初始化的颜色设置，但也可通过前端的切换来更改主题色 拿到换肤需求后，就在思考该如何实现呢?先搜一下，看下有哪些方法Ant
Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuetify 核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。Vue 的语义成分。利用 Vue 的功能组件，所有基于标记的用于援助主部件的类，比如一个 card 题目，可以使用 v-card-title 来处理成型容易。Vuetify 被设想为从底层创建。每一个组件，指令
基本概念介绍：vue实例方法：vm.$set、vm.$del、vm.$nextTick等，挂在Vue.prototype上的方法。全局API： Vue.directive、Vue.filter、Vue.component等，挂在Vue构造函数上的方法。本章从源码角度分析，Vue.js是如何实现这些功能的一、Vue实例方法的实现：Vue构造函数源码：import { initMixin } from
转载
2024-10-10 14:12:33
79阅读
介绍本文适合黑白切换或者主题样式偏少的（建议：2-10种）；主题越多，样式会越多。理论上无限套。本文适合已经写好了一套主题，然后需求增加第二套或者多套主题（最好小于10套，当然也可以更多，但是样式也会更多）本文以 vue + vue-cli2.x + element-ui +vuex举例经过项目实战后建议直接使用css变量系列~请看我最后一点：实现您需要实现全局样式文件 1）在/src/main.
转载
2024-04-22 12:46:11
1003阅读
LESS基础语法 我们一起来学习一下LESS的基础语法，LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。这些基础语法需要我们先牢牢的掌握住，然后才可以灵活的在项目中进行实战。 变量 和JS中的变量一样，只是LESS的变量定义不是使用VAR而是使用
转载
2017-11-01 10:51:00
222阅读
2评论
目录在 css 自定义变量的功能以及出来许久了，但实际开发中大家使用并不多。归其原因是因为 less、sass 等预处理器已经拥有定义变量的功能，以及Vue、react很方便设置 style 样式，大家可能觉得使用 css 定义变量不方便且没必要。实则不然举个最直观的栗子：“如何使用 vue 设置伪类伪元素的样式”。这是个世纪难题，大部分人可能会通过修改类名的方式解决，可如果要修改的样式多，或者我
现实背景：很多时候我们会在全局调用一些方法。 实现方式两种：官网的实现use方法，然后你也可以用野路子直接在Vue.prototype上面定义。 先说野路子，因为其实野路子就是最根本的实现方式，官方的use实现也是一样的，只是use很好的封装了。 /*
*main.js中实例Vue时添加方法
*/
import Vue from 'vue';
//这样以后你就可以在该项目下的其他组件中使
前言业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是vue2的项目，找了很久都没有找到一个好的方便的解决方案，最后在github找到一个使用css3的解决方案，觉得十分不错，也很简单明了，于是就拿来直接用了，参考的github项目地址：https://github.com/LiuyangAce/theme-switch/tree/master，可以参考
转载
2024-09-01 23:10:14
145阅读
[PConline 应用]几天前，Windows 10 Dev亮相（Build 20161），最大一个看点就是颜值更高的开始菜单。尽管还处于早期预览状态，但新菜单无论从颜值还是兼容性方面，都已经相当出色。那么继新版开始菜单“实锤”之后，还有什么小软件可以让你的Win10更酷呢？今天我们就来介绍几个。 新版开始菜单来了！
1. 自动昼夜壁纸苹果系统有一项很有趣的特性，可以让壁纸
在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或看几篇博客应该就能实现。但这里面其实还有很多细节需要我们去做，如Tab切换时，切换过的Tab组件状态怎样缓存在项目中经常会有 页面A -> 页面B -> 页面C 则从
转载
2024-03-18 12:22:36
465阅读
编辑文章时所使用vue版本。
原创
2024-09-07 15:17:52
842阅读
LESS是什么？ less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。 本质上，LESS包含一套自定义的语法及一个解析器，写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性，更
转载
2024-08-17 23:23:02
86阅读
//引入依赖模块
var path = require( 'path' )
var config = require( '../config' ) // 获取配置
转载
2024-07-23 08:43:09
121阅读
目录一、less简介二、安装插件三、编写less四、less语法less注释父子关系嵌套变量其他五、混合函数六、补充一、less简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性：像对变量的支持、对mixin的支持…less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法
前言首先，我们来回忆一下「CSS 作用域」这一概念，它的本质是通过让每一个选择器成为一个「unique」的存在，这样就自然而然地形成了作用域。而提到「Vue」中「作用域 CSS」，我想大家应该立即想到以 scoped 的方式形成的带有作用域的 css。但是，值得一提的是，在「Vue」中还支持了一种「作用域 CSS」，即「CSS Module」。提及 「CSS Module」，想必大家会有点陌生，相
