V3+ts如何使用自定义指令封装占位图片?

在Vue 3中，你可以通过创建一个自定义指令来封装占位图的功能。以下是一个简单的例子：

1. 定义自定义指令：

// 在你的 Vue 应用中的 directives.js 或类似文件
export const placeholderImage = {
  mounted(el, binding) {
    const img = new Image();
    img.onload = () => (el.style.backgroundImage = 'url(' + img.src + ')');
    img.onerror = () => {
      el.style.backgroundImage = 'none';
      el.style.background = binding.value || 'grey';
    };
    img.src = binding.value || binding.arg; // 使用指令的参数或绑定值作为图片地址
  }
};

2. 注册自定义指令：

// 在你的 Vue 应用中的 main.js 或类似文件
import { createApp } from 'vue';
import App from './App.vue';
import { placeholderImage } from './directives'; // 引入自定义指令
 
const app = createApp(App);
 
app.directive('placeholder-image', placeholderImage); // 注册自定义指令
 
app.mount('#app');

3. 使用自定义指令：

<!-- 在你的组件模板中 -->
<div v-placeholder-image="'path/to/your/placeholder.jpg'">
  <!-- 这里是你的内容 -->
</div>

在这个例子中，自定义指令v-placeholder-image会创建一个新的Image对象，然后尝试加载指定的图片。如果图片加载成功，它会将元素的背景图像设置为加载的图片。如果加载失败，它会设置一个默认的背景颜色。你可以通过绑定值或参数来指定占位图片的路径，如果没有指定，默认会使用灰色背景。