原创 石小石Orz 2025-01-20 08:30 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
背景简介
在前端开发中，我们经常会遇到这样的一个需求：「hover一个svg图片，svg展现不同状态的样式。」
大家常见的写法就是引入两个颜色状态的svg，然后通过v-show控制显影
<template>
<div>
<button @click="toggleColor">切换svg颜色</button>
<svg v-show="isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg v-show="!isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
</div>
</template>
<script>
export default {
data() {
return {
isRed: true
};
},
methods: {
toggleColor() {
this.isRed = !this.isRed;
}
}
};
</script>
这样实现不是不可以，但是非常繁琐，维护成本高。实际上，对于一些「简单」的svg图片（仅通过fill即可决定其颜色），我们只需要改变它的填充颜色就行，实在没必要把一个svg写两边！
比如，上面的svg图片，我们只需要改变fill填充颜色，就可以改变svg的颜色！
所以，我们现在用更简单的方式自定义vue指令实现这个效果！我们先看看成品代码是如何使用的！
<template>
<span v-color="blue">
<svg v-show="isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle cx="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
// 自定义指令名称
const color = {
// ....指令逻辑
}
// 挂载，注册
const directives = {
install: function (app: any) {
app.directive('color', color)
}
};
// 导出
export default directives;
2、mian.js中注册自定义指令
import { createApp } from 'vue';
import App from './App.vue';
import color from './directives/color';
const app = createApp(App);
app.directive('color', color);
app.mount('#app');
3、使用自定义指令
<template>
<div v-color>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
</template>
开发思路
hover变色功能实现
vue指令有几个重要钩子(都是可选的)：
const myDirective = {
// 在绑定元素的 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>
<div v-color>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
</template>
// 拖拽的指令
const color = {
beforeMount(el: any) {
// el就是div这个dom元素本身
// ...
}
}
// 挂载，注册
const directives = {
install: function (app: any) {
app.directive('color', color)
}
};
export default directives;
那么实现hover svg图片变色就非常容易了
// 拖拽的指令
const color = {
beforeMount(el: any) {
const wrapDom = el;
const svg = el.querySelector("svg");
wrapDom.onmouseenter = function () {
svg.style.fill = "rgb(0, 101, 179)";
};
wrapDom.onmouseleave = function () {
svg.style.fill = "#C7CBCF";
};
}
};
// 挂载，注册
const directives = {
install: function (app: any) {
app.directive("color", color);
}
};
export default directives;
❝你可能有疑问，为啥指令不直接写在svg本身，非要放在一个父元素上。这样做的目的好处就是：你的svg可以通过各种方式引入，指令更加安全！比如，当svg以组件的形式引入时，指令写在组件上是不安全的。
❞
动态传递颜色
上述代码颜色是写死的，我们可以给v-color传参，让其颜色更加丰富！
<template>
<div v-color="blue">
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="gary" />
</svg>
</div>
</template>
// 拖拽的指令
const color = {
beforeMount(el: any, binding: any) {
// binding可以获取到指令的一些列数据，valu属性是绑定的参数
const wrapDom = el;
const svg = el.querySelector("svg");
// 储存svg原本的颜色
const originColor = svg.style.fill
wrapDom.onmouseenter = function () {
svg.style.fill = binding.value;
};
wrapDom.onmouseleave = function () {
svg.style.fill = originColor;
};
}
};
// 挂载，注册
const directives = {
install: function (app: any) {
app.directive("color", color);
}
};
export default directives;
如上述代码，我们就完美的实现了svg颜色的动态传入！简单粗暴！
复杂的svg图片如何处理
上述代码仅能针对一些简单的svg图片，改变其fill填充颜色。但是对于一些复杂的svg，它的颜色除了填充颜色，还有很多其他属性决定，上述代码就 无力回天了！但是，我们可以通过改变代码实现加载不同的svg。
如下面代码，我们调整了v-color的入参，它是一个数组，数组第一位是一个普通状态的svg，数组第二位是hover状态的svg。
<template>
<div v-color="[home,hoverHome]"></div>
</template>
import home from "@/assets/home.svg?raw";
import hoverHome from "@/assets/home.svg?raw";
❝注意这两个svg引入方式，都是一个字符串！具体引入原理参考我的其他文章：https://juejin.cn/post/7173467405522305055
❞
我们的指令代码只需要做如下更改即可
// 拖拽的指令
const color = {
beforeMount(el: any, binding: any) {
const svg = binding.value[0];
const hoverSvg = binding.value[1];
el.onmouseenter = function () {
el.innerHTML = hoverSvg
};
el.onmouseleave = function () {
el.innerHTML = svg
};
}
};
// 挂载，注册
const directives = {
install: function (app: any) {
app.directive("color", color);
}
};
export default directives;
是不是超级简单？
总结
这篇文章使用指令实现了「svg图片的hover效果」，对于普通的svg图片，我们可以借助指令直接改变其fill属性，进而改变svg的颜色。
对于复杂svg图片，改变fill属性不可行，但我们可以引入两种状态的svg图片字符串，借助指令动态改变svg父级元素的innerHTML。
大家如果还有更好的方案，欢迎交流！
点击关注公众号，“技术干货” 及时达！
