解決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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中路由router配置步驟詳解
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工具的方法
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程詳解
Vue.js?在其運(yùn)行過程中會將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實(shí)際的?DOM?節(jié)點(diǎn),這個過程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程,需要的朋友可以參考下
2024-09-09
多個vue項(xiàng)目實(shí)現(xiàn)共用一個node-modules文件夾
這篇文章主要介紹了多個vue項(xiàng)目實(shí)現(xiàn)共用一個node-modules文件夾，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue.js和Vue.runtime.js區(qū)別淺析
這篇文章主要介紹了Vue.js和Vue.runtime.js區(qū)別淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
axios請求中斷的幾種方法
在實(shí)際應(yīng)用場景中,假如有一個下載或者導(dǎo)出請求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會很慢,這時(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