解決vue-photo-preview 異步圖片放大失效的問題
更新時(shí)間：2020年07月29日 11:48:37 作者：lizhen_software
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
官方提供的異步圖片加載的話，在數(shù)據(jù)加載完之后執(zhí)行this.$previewRefresh()，但我這里測試的并不好使，最后解決的方式是加transition，代碼截圖如下：
注意v-if一定要在transtion上加，v-if一定要有，fade的css如下：
補(bǔ)充知識：vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件
一、下載安裝
npm install --save vue-picture-preview-extend npm install --save vue-picture-preview // 如果安裝了cnpm，推薦國內(nèi)用戶使用cnpm進(jìn)行安裝 cnpm install --save vue-picture-preview-extend cnpm install --save vue-picture-preview
二、配置
// 在 main.js 添加以下代碼 import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)
三、使用
<!-- 在app.vue添加lg-preview組件 --> <div id="app"> <router-view></router-view> <lg-preview></lg-preview> </div> <!-- 給img標(biāo)簽添加v-preview屬性，放入圖片路徑就能使用了 --> <img v-preview="img.url" :src="img.url" >
以上這篇解決vue-photo-preview 異步圖片放大失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue的主要思想是組件化開發(fā),路由用來配置組件對應(yīng)展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內(nèi)容展示在頁面上,感興趣的朋友跟隨小編一起看看吧2023-12-12
Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明
這篇文章主要介紹了Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過截圖實(shí)例代碼說明給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程詳解
Vue.js?在其運(yùn)行過程中會(huì)將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實(shí)際的?DOM?節(jié)點(diǎn),這個(gè)過程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程,需要的朋友可以參考下2024-09-09
多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾
這篇文章主要介紹了多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue.js和Vue.runtime.js區(qū)別淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在實(shí)際應(yīng)用場景中,假如有一個(gè)下載或者導(dǎo)出請求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會(huì)很慢,這時(shí)候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下2024-10-10
vue實(shí)現(xiàn)路由鑒權(quán)和不同用戶登錄
這篇文章主要為大家詳細(xì)介紹了vue中實(shí)現(xiàn)路由鑒權(quán)和不同用戶登錄的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09