3 28 如何實現乙個指令 ?

2021-10-22 23:54:27 字數 1120 閱讀 4707

前面的話

前端日問,鞏固基礎,不打烊!!!

解答基本用法

使用vue.directive()來註冊自定義指令:

全域性註冊

比如制定乙個懶載入指令v-lazyload

vue.directive(

'lazyload'

,)

指令選項

實現乙個懶載入指令

//vue 懶載入

// 引入節流函式

import

from

'./util'

;export default (vue, options =

) => };

}// 設定初始值

let init = ;/

/ 要顯示的列表

let listenlist = ;

// 已經載入過的位址

let alredyarray = ;

// 判斷是否載入過

const isalredyload = (imagesrc) =>

else};

//檢測是否可以載入,如果可以則進行載入

const iscanload = (item) =>

;return true;

}else};

//vue 指令最終的方法

const addlistener = (ele, binding) =>

let item = ;/

/顯示預設的

ele.src = init.default;

//再看看是否可以顯示此

if(iscanload(item));

//否則將位址和元素均放入監聽的lisenlist裡

listenlist.push(item);/

/然後開始監聽頁面scroll事件

window.onscroll = (

) =>

}, 1000)

; carriedout();

};};

vue.directive(

'lazyload',)

;};

如何實現乙個窗體

如何實現乙個窗體 jframe 1.建乙個類窗體例如 swingui extands jframe 2.在main函式中初始化例項swingui frame new swingui frame.settitle frame.addwindowlistener listener frame.pack ...

如何實現乙個async await

async的執行原理 其實就是自動執行generator函式 暫時不考慮genertor的編譯步驟 更複雜 const getdata newpromise resolve settimeout resolve data 1000 這樣的乙個async函式 應該再1秒後列印data async fu...

用Vue實現乙個全選指令

下面為實現 全選 data function computed set function value return value 選中的數量 selectcount return i 選中的陣列 checkedgroups return checkedgroups 這種方法用起來不太方便,首先是很難復...