溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了vue-photo-preview異步圖片放大失效怎么辦，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
官方提供的異步圖片加載的話，在數據加載完之后執行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，推薦國內用戶使用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異步圖片放大失效怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
