null - 程序员宅基地

Css中使用Vue的变量_vue css变量-程序员宅基地

在这里插入图片描述
应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)
1.css中如何用变量
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

<span
   v-for="tag in visitedViews"
   :key="tag.path"
    class="tags-view-item" //默认样式
    :style="spanStyle" // 根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
    :class="isActive(tag) ? 'active' : ''"
 >
   {
    {
     tag.title }}
</span>

export default {
    
  data() {
    
    return {
    
      spanStyle: {
    
        "--color": this.$store.state.settings.theme //默认值
      }
  };
  watch: {
    
  	//侦听store里某个属性的变化
    "$store.state.settings.theme": function(val) {
    
      this.spanStyle["--color"] = val;
  },
},
<style>
    .tags-view-item {
    
     //...
      &.active {
    
        background-color: var(--color);
        color: #fff;
        border-color: var(--color);
        &::before {
    
        }
      }
    }
  }
</style>

在这里插入图片描述
渐变按钮的示例

<span class="btn" 
	  @click="jumCZ"
	  :style="randomColor"//根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
>
		充值
</span>
export default {
    
  data() {
    
    return {
    
      randomColor: {
    
        "--color": "#1a73e8" // 默认值
      }
    };
  },
  watch: {
    
   //侦听store里的settings模块下的state里的 theme 发生变化 产出随机颜色
    "$store.state.settings.theme": function(val) {
    
      const randomColor = Math.floor(Math.random() * 16777215).toString(16);
      this.randomColor["--color"] = "#" + randomColor;
    }
  },
}

<style>
    .btn {
    
      width: 70px;
      height: 20px;
      background-image: linear-gradient(
        to right,
        var(--color) 0%, //使用data中的变量
        #79cbca 51%,
        #77a1d3 100%
      );
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
      border-radius: 10px;
      display: block;
      cursor: pointer;
      font-size: 14px;
      line-height: 18px;
    }
    .btn:hover {
    
      background-position: right center; 
      color: #fff;
      text-decoration: none;
    }
</style>

本文链接：https://blog.csdn.net/FellAsleep/article/details/130617163

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java学习笔记day09 final、多态、抽象类、接口_} } class a { public void show() { show2(); } publ-程序员宅基地

文章浏览阅读155次。java学习笔记day09思维导图final 、多态、抽象类、接口（都很重要）一、final二、多态多态中的成员访问特点【P237】多态的好处【P239]多态的弊端向上转型、向下转型【P241】形象案例：孔子装爹多态的问题理解： class 孔子爹 { public int age = 40; public void teach() { System.out.println("讲解JavaSE"); } _} } class a { public void show() { show2(); } public void show2() { s

Qt5通信 QByteArray中文字符出现乱码解决方法_qbytearray中文乱码-程序员宅基地

文章浏览阅读2.4k次，点赞3次，收藏9次。在写qt网口通信的过程中，遇到中文就乱码。解决方法如下：1.接收端处理中文乱码代码如下 QByteArray-> QString 中文乱码解决： #include <QTextCodec>QByteArray data= tcpSocket->readAll(); QTextCodec *tc = QTextCodec::codecForName("GBK"); QString str = tc->toUnicode(data);//str如果是中文则是中文字符_qbytearray中文乱码

JavaScript之DOM操作获取元素、事件、操作元素、节点操作_元素事件-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏15次。什么是 DOM？文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node._元素事件

安卓基础知识(一) 服务（Service）_安卓服务-程序员宅基地

文章浏览阅读1.4k次，点赞3次，收藏7次。关于服务的一些基本知识，包括活动对接口的方法调用，接口实现，服务生命周期等知识。_安卓服务

JDBC使用数据库连接池连接数据库（DBCP，C3P0，Druid）_采用连接池方式连接数据库-程序员宅基地

文章浏览阅读7.9k次，点赞5次，收藏8次。小白式数据库连接池使用，看完拿捏数据库连接池。_采用连接池方式连接数据库

C++多线程同步_c++线程同步-程序员宅基地

文章浏览阅读4.9k次，点赞5次，收藏36次。摘要：本文介绍了C++11中如何开启新线程，并详细讲解了线程的基础同步原语：mutex, lock_guard, unique_lock, condition variable和semaphore等。如何采用async, packaged_task和promise实现future同步机制？怎样处理spurious wakeup?本文以质数判定服务为例为大家分享C++多线程同步措施！1. C++线程和基础同步原语Thread mutex, lock_guard, unique_lock con._c++线程同步

随便推点

【flink番外篇】1、flink的23种常用算子介绍及详细示例（1）- map、flatmap和filter_flink 常用的分类和计算-程序员宅基地

文章浏览阅读1.6w次，点赞25次，收藏20次。本文主要介绍Flink 的3种常用的operator（map、flatmap和filter）及以具体可运行示例进行说明.将集合中的每个元素变成一个或多个元素,并返回扁平化之后的结果。按照指定的条件对集合中的元素进行过滤,过滤出返回true/符合条件的元素。本文主要介绍Flink 的3种常用的operator及以具体可运行示例进行说明。这是最简单的转换之一，其中输入是一个数据流，输出的也是一个数据流。下文中所有示例都是用该maven依赖，除非有特殊说明的情况。中了解更新系统的内容。中了解更新系统的内容。_flink 常用的分类和计算

（转）30 IMP-00019: row rejected due to ORACLE error 12899-程序员宅基地

文章浏览阅读590次。IMP-00019: row rejected due to ORACLE error 12899IMP-00003: ORACLE error 12899 encounteredORA-12899: value too large for column "CRM"."BK_ECS_ORDER_INFO_00413"."POSTSCRIPT" (actual: 895, maximum..._row rejected due to oracle

降低Nginx代理服务器的磁盘IO使用率，提高转发性能_nginx tcp转发硬盘io-程序员宅基地

文章浏览阅读918次。目前很多Web的项目在部署的时候会采用Nginx做为前端的反向代理服务器，后端会部署很多业务处理服务器，通常情况下Nginx代理服务器部署的还是比较少，而且其以高效性能著称，几万的并发连接处理速度都不在话下。然而去年的时候，我们的线上系统也采用类似的部署结构，同时由于我们的业务需求，Nginx的部署环境在虚拟机上面，复用了其他虚拟机的整体磁盘，在高IO消耗的场景中，我们发现Nginx的磁盘_nginx tcp转发硬盘io

Activiti 开发环境搭建_antdev activity-程序员宅基地

文章浏览阅读645次。Activiti 开发环境的搭建非常简单，主要分为 Activiti runtime 的安装以及 Eclipse 开发环境的配置。本文以 Windows 平台为例介绍 Activiti 5.8 版的开发环境的搭建配置过程。Activiti 的运行时程序可以从http://www.activiti.org/download.html 下载，目前最新版本为 5.8。为了配置使用 Activ_antdev activity

Vuex: 实现同级组件的简单通信_vuex的组件同级通信-程序员宅基地

文章浏览阅读2.3k次。1. Vuex 是什么？Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案，主要解决以下两个问题：多个视图依赖于同一状态来自不同视图的行为需要变更同一状态2. 核心概念State: 可以简单理解为Vue 维持的全局变量（状态）。 Getter: 获取State 中的状态的方法，可以在取出前对数据进行二次处理。 Mutation: 是改变State 中的状态..._vuex的组件同级通信

逆向中常见的Hash算法和对称加密算法的分析_findcrypt3 支持哪些算法-程序员宅基地

文章浏览阅读8.4k次，点赞31次，收藏33次。逆向中常常出现一些加密算法，如果我们能对这些加密算法进行快速识别则会大大减少我们逆向的难度，虽然IDA已有密码分析神器Findcrypt，但掌握手动分析方法能帮助我们应对更多的情况。这篇文章将介绍逆向中常见的单项散列算法和对称加密算法的识别方法。0xFF. 前言在很长一段时间里我经常发现自己面对复杂的加密算法无从下手，可能是因为还没有系统学过密码学吧orz，总之这个问题困扰了我很久。于是最近我花了一些时间来解决自己在密码学这块的薄弱点，写下这篇文章的目的之一也是为了巩固所学知识。加密算法的部分没有_findcrypt3 支持哪些算法