css:img引入svg后修改颜色

<img class="group-icon" :class="group.opened ? 'group-icon-active' : ''":src="require('@/assets/icon/' + group.icon + '.svg')" />
// 默认样式
.group-icon {width: 16px;height: 16px;position: relative;left: -1000px;filter: drop-shadow($--gray 1000px 0);
}// 激活样式
.group-icon-active {filter: drop-shadow($--color-primary 1000px 0);
}

此方法亲测有效,缺点是svg如果原本包含多色,会被处理成单色,比如我这里就都会变色灰色,点击后设置一个颜色,也只能是单色。

如果是比较有耐心,可以每个分组设置两个svg图片,一个是默认图片,一个是激活图片,就能保持svg多色性。

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

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

相关文章

HTML1:html基础

HTML 冯诺依曼体系结构 运算器 控制器 存储器 输入设备 输出设备 c/s(client客户端) 客户端架构软件 需要安装,更新麻烦,不跨平台 b/s(browser浏览器) 网页架构软件 无需安装,无需更新,可跨平台 浏览器 浏览器内核: 处理浏览器得到的各种资源 网页: 结构 HTML(超…

【Rust】生命周期

Rust 生命周期机制是与所有权机制同等重要的资源管理机制。 之所以引入这个概念主要是应对复杂类型系统中资源管理的问题。 引用是对待复杂类型时必不可少的机制&#xff0c;毕竟复杂类型的数据不能被处理器轻易地复制和计算。 但引用往往导致极其复杂的资源管理问题&#x…

Elasticsearch:我们如何演化处理二进制文档格式

作者&#xff1a;来自 Elastic Sean Story 从二进制文件中提取内容是一个常见的用例。一些 PDF 文件可能非常庞大 — 考虑到几 GB 甚至更多。Elastic 在处理此类文档方面已经取得了长足的进步&#xff0c;今天&#xff0c;我们很高兴地介绍我们的新工具 —— 数据提取服务&…

两个数组的dp---区间dp

1、最长公共子序列 1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; class Solution {//1、状态表示&#xff1a;// 经验 题目要求// (1)选取第一个字符串[0,i]区间&#xff0c;以及第二个字符串[0,j]区间&#xff0c;作为研究对象// (2)根据题目要求&…

SCI一区 | Matlab实现NGO-TCN-BiGRU-Attention北方苍鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现NGO-TCN-BiGRU-Attention北方苍鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现NGO-TCN-BiGRU-Attention北方苍鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型…

解决JavaWeb中IDEA2023新版本无法创建Servlet的问题

出现问题&#xff1a;IDEA右键创建Servlet时&#xff0c;找不到选项 原因分析&#xff1a;IDEA的2023版的已经不支持Servlet了&#xff0c;如果还要使用的话&#xff0c;需要自己创建模板使用 创建模板 右击设置&#xff0c;选择&#xff08;File and Code Templates&#x…

前端基础技术栈教程--HTML、CSS与javascript

在我们身处的这个信息化时代&#xff0c;互联网已成为生活不可或缺的一部分。每当我们打开网站浏览信息时&#xff0c;都离不开三个构建网页的基石&#xff1a;HTML、CSS和JavaScript。这些技术不仅塑造了网页的骨架和外观&#xff0c;更为我们提供了丰富的互动体验。对于渴望掌…

Selenium的简单防反爬和浏览器配置

# Selenium的简单使用&#xff1a;https://zhuanlan.zhihu.com/p/557463669 # 防反爬参考&#xff1a;https://blog.csdn.net/weixin_51368459/article/details/125462178 from selenium import webdriver from selenium.webdriver.edge.options import Options# 设置浏览器驱动…

UNIAPP(小程序)每十个文章中间一个广告

三十秒刷新一次广告 ad-intervals"30" <template><view style"margin: 30rpx;"><view class"" v-for"(item,index) in 100"><!-- 广告 --><view style"margin-bottom: 20rpx;" v-if"(inde…

vue3和vue2项目中如何根据不同的环境配置基地址?

在不同环境下取出的变量的值是不同的, 像这样的变量称为环境变量 为什么要使用环境变量呢? 开发环境生产环境下的接口地址有可能是不一样的&#xff0c;所以我们需要根据环境去配置不同的接口基地址 1、vue2环境变量配置 在根目录创建&#xff1a;.env.development和.env.p…

全栈的自我修养 ———— react中router入门+路由懒加载

router 下载router配置view创建目录配置index.js 下载router npm install react-router-dom配置view 如下将组件倒出 const Login () > {return <div>这是登陆</div> } export default Login创建目录 配置index.js React.lazy有路由懒加载的功能&#xff0…

JS详解-迭代器模式详解两种方法实现

前言&#xff1a; // 迭代协议可以定制对象的迭代行为-分为两个协议&#xff1a;可迭代协议、迭代器协议// 可迭代协议&#xff1a;增加方法[Symbol,.iterator](){}&#xff08;属性名表达式&#xff09;返回符合协议器的对象// 迭代器协议:有next方法的对象&#xff0c;next方…

LLMOps快速入门,轻松开发部署大语言模型

大家好&#xff0c;如今我们能够与ChatGPT进行轻松互动&#xff1a;只需输入提示&#xff0c;按下回车&#xff0c;就能迅速得到回应。然而&#xff0c;这个无缝互动的底层&#xff0c;是一系列复杂而有序的自动执行步骤&#xff0c;即大型语言模型运营&#xff08;LLMOps&…

SpringBoot快速入门笔记(4)

文章目录 一、Vue框架1、前端环境准备2、简介3、快速开始4、事件绑定 二、Vue组件化开发1、NPM2、Vue Cli3、组件化开发4、SayHello自定义组件5、Movie自定义组件 一、Vue框架 1、前端环境准备 编码工具&#xff1a;VSCode 依赖管理&#xff1a;NPM 项目构建&#xff1a;VueCl…

【QT教程】QML与C++的交互

主页 软件开发 QT6 QML高级编程补天云火鸟自动化创作平台您能够创建大约3000 个短视频一天可以轻松创建多达 100 个视频 QML与C的交互 使用AI技术辅助生成 【QT免费公开课】您可以到这里观看大量的QT视频课程 【QT付费视频课程】QT QML C 高级扩展开发 目录 1 QML与C的交互…

c++类和对象三部曲——(3)

目录 前言 运算符重载 如何写出运算符重载&#xff1f; 默认成员函数之赋值重载 特殊情况&#xff1a;前置与后置 特殊情况&#xff1a;友元与"operator<<" 内部类 const成员函数 关于const权限放大与缩小的问题 取地址及const取地址重载 再谈构造函…

NLP学习路线总结

NLP&#xff08;自然语言处理&#xff09;是人工智能领域的一个重要分支&#xff0c;涉及计算机理解和生成人类语言的能力。以下是一份NLP的学习路线总结&#xff1a; 基础知识: 编程语言: 掌握Python或Java等主流编程语言&#xff0c;因为大多数NLP工具和库都是用这些语言编写…

DDOS攻击原理

DDoS&#xff08;分布式拒绝服务&#xff09;攻击是一种常见的网络攻击方式&#xff0c;其目的是使目标服务或资源无法正常提供服务给合法用户。DDoS攻击的基本原理是通过大量的恶意流量或请求&#xff0c;耗尽目标系统的资源&#xff08;如带宽、处理能力等&#xff09;&#…

linux模糊删除文件命令

在Linux中&#xff0c;可以使用find命令配合-name参数和通配符来模糊匹配并删除文件。以下是一个示例命令&#xff0c;用于删除当前目录及子目录下所有包含“example”文本的文件&#xff1a; find . -type f -name *example* -exec rm -f {} \;解释&#xff1a; . 表示当前目…