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

一、在<script setup lang="ts">中，局部注册自定义指令

具体步骤：

1.定义一个变量名，按照v开头的规则来定义，并且v后面的变量名首字母大写，eg:vImg

2.vue3和vue2自定义指令的方式不同，一个指令的定义对象有很多钩子函数可选，一般我们直接用mounted这个钩子函数

其他钩子函数及其参数的使用，可以直接参考vue3自定义指令官方文档：

自定义指令 | Vue.js  


 

3.el可以获取DOM元素上的属性，binding里面的value属性可以获取传过来的属性值

4.当图片加载错误时，调用el.onerror，将获取到的value值赋值给el上的src，就可以完成图片错误时的占位

实现代码： 

<script setup lang="ts">
// 局部自定义图片占位
const vImg = {
  mounted: (el: any, binding: { value: string }) => {
    console.log(el, 1111111)
    el.onerror = () => {
      el.src = binding.value
    }
  }
}
</script>

html结构： 

<img
  style="width: 80px; height: 80px"
  v-img="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
  :src="userList.avatar"
  alt=""
/>

 二、在main.ts中全局注册自定义指令

具体步骤：

1.直接使用：app.directive('指令名',{}）

2.和局部注册一样，在mounted钩子函数中写业务代码

实现代码： 

 // 全局自定义错误占位图
app.directive('errorImg', {
  mounted(el, binding) {
    console.log(el, 1111)
    console.log(binding, 222)
    el.onerror = () => {
      el.src = binding.value
    }
  }
})

html中使用：

<img
  style="width: 80px; height: 80px"
  v-errorImg="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
  :src="userList.avatar"
  alt=""
/>