快捷導(dǎo)航

詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖

更新時間：2023年02月15日 09:27:23 作者：搬磚IT員

這篇文章主要介紹了詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、自定義指令

vue中除v-model、v-show等內(nèi)置指令之外，還允許注冊自定義指令，獲取DOM元素，擴展額外的功能。

1、局部注冊和使用

注冊在組件內(nèi)的script內(nèi)的directives內(nèi)

export default {
   directives:{
     focus:{ //自定義指令名
       inserted(el){ //el就是使用此指令的DOM元素，此處el指這個input框
         el.focus() //此el對應(yīng)的DOM元素自動獲取焦點
       }
     }
   }
};

使用時，v-自定義指令名即可

<input type="text" v-focus>

2、全局注冊和使用

在main.js用 Vue.directive()方法來進行注冊, 以后隨便哪個.vue文件里都可以直接用v-fofo指令

Vue.directive('Color', {
  inserted(el, binding) { //el代表此DOM元素，binding.value接收傳遞過來的參數(shù)
    el.style.color = binding.value //給此DOM元素設(shè)置文字顏色
  },
  update(el, binding) { //使用此指令的DOM更新就執(zhí)行此方法
    el.style.color = binding.value
  }
})

所有的.vue文件都可直接使用

<!-- 傳參為字符串" '顏色值' " 或 "變量" -->
<p v-Color="'red'" >修改文字顏色</p>

注意點：

inserted方法 - 指令所在標(biāo)簽, 插入到網(wǎng)頁上觸發(fā)(一次)
update方法 - 指令對應(yīng)數(shù)據(jù)/標(biāo)簽更新時, 此方法執(zhí)行，只要更新就觸發(fā)
el參數(shù)為使用此自定義指令的DOM元素
binding參數(shù)用來接收傳的值，binging.value就是具體值

二、自定義指令處理圖片加載失敗(碎圖)

1、在main.js中注冊自定義指令，接收傳遞的值

Vue.directive('imgerror', {
  inserted(el, bindings) {
    el.onerror = function() { //當(dāng)圖片有地址 但是地址沒有加載成功的時候 會報錯 會觸發(fā)圖片的一個事件 => onerror
      el.src = bindings.value //加載失敗, 給一張默認圖展示
        }    
    }    
})

2、組件中使用自定義指令值處理，

imgDefault1為用戶可能出錯的圖，

imgDefault為正確的圖，當(dāng)用戶圖地址加載失敗時，使用這個默認圖，

img1為本地的圖片，當(dāng)用戶沒有圖片數(shù)據(jù)，或數(shù)據(jù)為空時，加載此默認圖

<!--v-imgerror指令傳值加載失敗時的圖，:src邏輯與之后的img1為沒有圖片數(shù)據(jù)時加載的默認圖   -->
<img v-imgerror="imgDefault" :src="imgDefault1 || img1" alt="">

補充：組件內(nèi)直接使用圖片方式

<script>
import defaultImg from '圖片路徑' //第二種導(dǎo)入
export default{
    data(){
        return{
            img1: require('圖片路徑'), //第一種方式
            defaultImg：defaultImg  //第二種
        }
    }
}
</script>

到此這篇關(guān)于詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖的文章就介紹到這了,更多相關(guān)Vue自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: