以下是一个简单的自定义指令的例子:
<template>
<div>
<!-- 使用 v-image 指令,绑定图片地址和默认占位图地址 -->
<img v-image="imageUrl" v-placeholder="placeholderImage" alt="Image" />
</div>
</template>
<script>
// 创建自定义指令
Vue.directive('image', {
// 指令绑定到元素时调用
bind(el, binding) {
// 设置图片加载失败时的回调函数
el.onerror = function () {
// 将图片的 src 设置为默认占位图的地址
el.src = binding.value.placeholder;
};
// 设置图片地址
el.src = binding.value.src;
},
});
// 创建自定义指令
Vue.directive('placeholder', {
// 指令绑定到元素时调用
bind(el, binding) {
// 设置元素的 src 属性为默认占位图的地址
el.src = binding.value;
},
});
export default {
data() {
return {
// 默认占位图的地址
placeholderImage: 'path/to/placeholder.jpg',
// 图片地址,可以是动态获取的
imageUrl: 'path/to/image.jpg',
};
},
};
</script>
<style>
/* 可以添加样式,控制默认占位图的大小、位置等 */
</style>
在上述例子中,我们创建了两个自定义指令:v-image
和 v-placeholder
。v-image
指令负责设置图片加载失败时的回调函数,而 v-placeholder
指令负责设置默认占位图的地址。通过在模板中使用这两个指令,你可以实现图片加载失败时显示默认占位图的效果。