如何在自定义vue指令文件中添加css代码

Question

我想要一个图像回退指令，如果图像加载失败，它只需用渐变背景填充父div。

我试过这个指令文件：

export default {
bind(el: any, binding: any) {
try {
.....
img.onerror = () => {
el.parentNode.classList.add("fallback");
};
} catch (e) {
}
},
};

使用此模板：

<div><img v-image-fallback :src="xxx" /></div>

和样式：

.fallback {
width: 600px;
height: 400px;
margin: auto;
background: radial-gradient(...);
}

如何组合指令和css部分？或者这可能吗？

Answer 1

直到Vue 2中的inserted钩子或Vue 3中的mounted钩子，父节点才保证存在。

从bind挂钩切换到上述其中一个：

// MyDirective.js
export default {
// BEFORE:
bind(el) {
console.log(el.parentNode) // => null ❌ 
}
// AFTER (Vue 2):
inserted(el) {
console.log(el.parentNode) // => <div> ✅
}
// AFTER (Vue 3):
mounted(el) {
console.log(el.parentNode) // => <div> ✅
}
}

演示