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