溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue-photo-preview異步圖片放大失效怎么辦

發(fā)布時(shí)間：2020-07-30 09:24:13 來(lái)源：億速云 閱讀：384 作者：小豬 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要為大家展示了vue-photo-preview異步圖片放大失效怎么辦，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

官方提供的異步圖片加載的話，在數(shù)據(jù)加載完之后執(zhí)行this.$previewRefresh()，但我這里測(cè)試的并不好使，最后解決的方式是加transition，代碼截圖如下：

vue-photo-preview異步圖片放大失效怎么辦

注意v-if一定要在transtion上加，v-if一定要有，fade的css如下：

vue-photo-preview異步圖片放大失效怎么辦

補(bǔ)充知識(shí)：vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件

一、下載安裝

npm install --save vue-picture-preview-extend
npm install --save vue-picture-preview
 
// 如果安裝了cnpm，推薦國(guó)內(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"
>

以上就是關(guān)于vue-photo-preview異步圖片放大失效怎么辦的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手