最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

歡迎光臨散文網(wǎng) 會(huì)員登陸 & 注冊(cè)

Vue3自定義指令實(shí)現(xiàn)圖片懶加載

2022-12-07 03:02 作者:Yang_Lee  | 我要投稿

好習(xí)慣,結(jié)果放最前,放便抄作業(yè)的

思路:

  1. 實(shí)例化一個(gè)進(jìn)入?yún)^(qū)監(jiān)視對(duì)象監(jiān)視img標(biāo)簽是否進(jìn)入根元素可見(jiàn)區(qū)

  2. img可見(jiàn)時(shí),將img的src置為真正的圖片地址,并解除監(jiān)視

用法:

其實(shí):

  • element-plus的組件庫(kù)已經(jīng)提供了圖片懶加載的解決方案

  • el-image組件的lazy屬性設(shè)為true即可

二次封裝:

  • 利用vue的屬性透?jìng)魈匦远畏庋bel-image組件

  • 其實(shí)就是強(qiáng)制開(kāi)啟懶加載并設(shè)置了一個(gè)類名和一些自定義樣式

  • 再為圖片加載失敗的情況設(shè)置一個(gè)代替圖標(biāo)

效果展示

坑:

  • Vue3對(duì)v-bind這個(gè)指令做出了一點(diǎn)破壞性的改動(dòng)

  • v-bind的順序是影響渲染的最終結(jié)果的

  • 跟合并對(duì)象類似,后綁定的屬性會(huì)覆蓋掉前面的同名屬性

搞IT的不會(huì)這點(diǎn)英文都看不懂吧?不會(huì)吧?不會(huì)吧?

以下情況lazy的實(shí)際值永遠(yuǎn)是true,不會(huì)被外部的props覆蓋

以下情況的lazy則是可以覆蓋的,相當(dāng)于給了一個(gè)默認(rèn)值

最后:

QAQ有沒(méi)有一樣四級(jí)掛了三次(第四次睡過(guò)了頭直接沒(méi)去)的兄臺(tái)?


Vue3自定義指令實(shí)現(xiàn)圖片懶加載的評(píng)論 (共 條)

分享到微博請(qǐng)遵守國(guó)家法律
通江县| 惠安县| 绥芬河市| 蛟河市| 思南县| 连江县| 岢岚县| 五华县| 孝昌县| 甘孜| 都安| 保靖县| 汉阴县| 尚志市| 五台县| 贵港市| 桦南县| 麻城市| 富锦市| 绿春县| 唐山市| 湘阴县| 汨罗市| 青川县| 龙南县| 天水市| 保康县| 寻乌县| 凤庆县| 汨罗市| 静宁县| 乌兰浩特市| 永新县| 吉安县| 元氏县| 三穗县| 德令哈市| 沿河| 中牟县| 大英县| 博客|