vue-photo-preview 비동기 이미지 확대 실효 문제 해결

공식 적 으로 제공 하 는 비동기 그림 을 불 러 오 면 데 이 터 를 불 러 온 후에 this.$preview Refresh()를 실행 합 니 다.하지만 저 는 테스트 가 잘 되 지 않 습 니 다.마지막 으로 해결 하 는 방법 은 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 비동기 이미지 의 확대 실 효 를 해결 하 는 문 제 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.