svg图片hover变色，一个指令居然就可以搞定！千万别在写两个控制显影了！ 点击关注公众号，“技术干货”及时达！ 背景简介在前端开发中，我们经常会遇到这样的一个需求：「hover一个svg图片，svg展现不同状态的样式。」 大家常见的写法就是引入两个颜色状态的svg，然后通过v-show控制显影 template div button@click="toggleColor"切换svg颜色/button svgv-show="isRed"xmlns="http://www.w3.org/2000/svg"viewBox="00100100"width="100"height="100" circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/ /svg svgv-show="!isRed"xmlns="http://www.w3.org/2000/svg"viewBox="00100100"width="100"height="100" circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="blue"/ /svg /div /template script exportdefault{ data(){ return{ isRed:true }, methods:{ toggleColor(){ this.isRed=!this.isRed; } } }; /script 这样实现不是不可以，但是非常繁琐，维护成本高。实际上，对于一些「简单」的svg图片（仅通过fill即可决定其颜色），我们只需要改变它的填充颜色就行，实在没必要把一个svg写两边！ 比如，上面的svg图片，我们只需要改变fill填充颜色，就可以改变svg的颜色！ 所以，我们现在用更简单的方式自定义vue指令实现这个效果！我们先看看成品代码是如何使用的！ template spanv-color="blue" svgv-show="isRed"xmlns="http://www.w3.org/2000/svg"viewBox="00100100"width="100"height="100" circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/ /svg /div /template 成品代码中，我们仅仅给svg的父标签添加了指令"v-clor='blue'"，就轻松实现了hover这个svg变色的效果！超级简单方便！ 使用指令实现svg图片hover变色实现hover变色，我们的核心原理就是获取到svg这个dom，然后更改其fill的值。为了让这个逻辑可以全局复用，我们将它封装成vue指令的形式！ vue指令正式开发前，你必须熟悉vue自定义指令的基础概念： ?官网Api传送门：Vue.js ?官方是这么介绍的：除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。 一个基本的全局指令，开发使用有三步： 1、创建指令文件directives/color.js //自定义指令名称 constcolor={ //....指令逻辑 } //挂载，注册 constdirectives={ install:function(app:any){ app.directive('color',color) } }; //导出 exportdefaultdirectives; 2、mian.js中注册自定义指令 import{createApp}from'vue'; importAppfrom'./App.vue'; importcolorfrom'./directives/color'; constapp=createApp(App); app.directive('color',color); app.mount('#app'); 3、使用自定义指令 template divv-color svg circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/ /svg /div /template 开发思路hover变色功能实现vue指令有几个重要钩子(都是可选的)： constmyDirective={ //在绑定元素的attribute前 //或事件监听器应用前调用 created(el,binding,vnode,prevVnode){ //下面会介绍各个参数的细节 }, //在元素被插入到DOM前调用 beforeMount(el,binding,vnode,prevVnode){}, //在绑定元素的父组件 //及他自己的所有子节点都挂载完成后调用 mounted(el,binding,vnode,prevVnode){}, //绑定元素的父组件更新前调用 beforeUpdate(el,binding,vnode,prevVnode){}, //在绑定元素的父组件 //及他自己的所有子节点都更新后调用 updated(el,binding,vnode,prevVnode){}, //绑定元素的父组件卸载前调用 beforeUnmount(el,binding,vnode,prevVnode){}, //绑定元素的父组件卸载后调用 unmounted(el,binding,vnode,prevVnode){} } 这意味着，当我们把指令v-color写到div标签上时，我们通过beforeMount可以获取到div这个dom template divv-color svg circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/ /svg /div /template //拖拽的指令 constcolor={ beforeMount(el:any){ //el就是div这个dom元素本身 //... } } //挂载，注册 constdirectives={ install:function(app:any){ app.directive('color',color) } }; exportdefaultdirectives; 那么实现hover svg图片变色就非常容易了 //拖拽的指令 constcolor={ beforeMount(el:any){ constwrapDom= constsvg=el.querySelector("svg"); wrapDom.onmouseenter=function(){ svg.style.fill="rgb(0,101,179)"; wrapDom.onmouseleave=function(){ svg.style.fill="#C7CBCF"; } }; //挂载，注册 constdirectives={ install:function(app:any){ app.directive("color",color); } }; exportdefaultdirectives; ?你可能有疑问，为啥指令不直接写在svg本身，非要放在一个父元素上。这样做的目的好处就是：你的svg可以通过各种方式引入，指令更加安全！比如，当svg以组件的形式引入时，指令写在组件上是不安全的。 ?动态传递颜色上述代码颜色是写死的，我们可以给v-color传参，让其颜色更加丰富！ template divv-color="blue" svg circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="gary"/ /svg /div /template //拖拽的指令 constcolor={ beforeMount(el:any,binding:any){ //binding可以获取到指令的一些列数据，valu属性是绑定的参数 constwrapDom= constsvg=el.querySelector("svg"); //储存svg原本的颜色 constoriginColor=svg.style.fill wrapDom.onmouseenter=function(){ svg.style.fill=binding.value; wrapDom.onmouseleave=function(){ svg.style.fill=originColor; } }; //挂载，注册 constdirectives={ install:function(app:any){ app.directive("color",color); } }; exportdefaultdirectives; 如上述代码，我们就完美的实现了svg颜色的动态传入！简单粗暴！ 复杂的svg图片如何处理上述代码仅能针对一些简单的svg图片，改变其fill填充颜色。但是对于一些复杂的svg，它的颜色除了填充颜色，还有很多其他属性决定，上述代码就 无力回天了！但是，我们可以通过改变代码实现加载不同的svg。 如下面代码，我们调整了v-color的入参，它是一个数组，数组第一位是一个普通状态的svg，数组第二位是hover状态的svg。 template divv-color="[home,hoverHome]"/div /template importhomefrom"@/assets/home.svg?raw"; importhoverHomefrom"@/assets/home.svg?raw"; ?注意这两个svg引入方式，都是一个字符串！具体引入原理参考我的其他文章：https://juejin.cn/post/7173467405522305055 ?我们的指令代码只需要做如下更改即可 //拖拽的指令 constcolor={ beforeMount(el:any,binding:any){ constsvg=binding.value[0]; consthoverSvg=binding.value[1]; el.onmouseenter=function(){ el.innerHTML=hoverSvg el.onmouseleave=function(){ el.innerHTML=svg } }; //挂载，注册 constdirectives={ install:function(app:any){ app.directive("color",color); } }; exportdefaultdirectives; 是不是超级简单？ 总结这篇文章使用指令实现了「svg图片的hover效果」，对于普通的svg图片，我们可以借助指令直接改变其fill属性，进而改变svg的颜色。 对于复杂svg图片，改变fill属性不可行，但我们可以引入两种状态的svg图片字符串，借助指令动态改变svg父级元素的innerHTML。 大家如果还有更好的方案，欢迎交流！ 点击关注公众号，“技术干货”及时达！ 阅读原文