快捷導(dǎo)航

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

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

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

一、自定義指令

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

1、局部注冊(cè)和使用

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

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

使用時(shí)，v-自定義指令名即可

<input type="text" v-focus>

2、全局注冊(cè)和使用

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

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

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

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

注意點(diǎn)：

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

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

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

Vue.directive('imgerror', {
  inserted(el, bindings) {
    el.onerror = function() { //當(dāng)圖片有地址 但是地址沒(méi)有加載成功的時(shí)候 會(huì)報(bào)錯(cuò) 會(huì)觸發(fā)圖片的一個(gè)事件 => onerror
      el.src = bindings.value //加載失敗, 給一張默認(rèn)圖展示
        }    
    }    
})

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

imgDefault1為用戶(hù)可能出錯(cuò)的圖，

imgDefault為正確的圖，當(dāng)用戶(hù)圖地址加載失敗時(shí)，使用這個(gè)默認(rèn)圖，

img1為本地的圖片，當(dāng)用戶(hù)沒(méi)有圖片數(shù)據(jù)，或數(shù)據(jù)為空時(shí)，加載此默認(rèn)圖

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

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

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

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

您可能感興趣的文章: