vue-preview 동적 으로 그림 의 너비 와 높이 를 가 져 오고 회전 기능 의 실현 을 증가 합 니 다.

vue-preview 는 자주 사용 하 는 이미지 뷰 어 입 니 다.웨 이 보 웹 페이지 버 전 은 바로 이 플러그 인 을 사용 합 니 다.

나 는 프로젝트 에서 도 이 플러그 인 을 사용 한 적 이 있 는데,전체적으로 말 하면 비교적 만족스럽다.하지만 그림 회전 기능 이 부족 합 니 다.
설치 사용
STEP 1:설치
npm i vue-preview -S
두 번 째 단계:설정 참조

import VuePreview from 'vue-preview'
Vue.use(VuePreview)
Vue.use(preview, {
 mainClass: 'pswp--minimal--dark',
 barsSize: {top: 0, bottom: 0},
 captionEl: false,
 fullscreenEl: false,
 shareEl: false,
 bgOpacity: 0.85,
 tapToClose: true,
 tapToToggleControls: false
})

STEP 3:사용

//         
previewlist: [
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  },
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  }
]
 
//      “preview-img” (        )，    “show”  
<img :src="decodeURIComponent(item.name)" class="preview-img" @click="show(index)">
 
//           
show (index) {
  this.$preview.open(index, this. previewlist);
}

동적 가 져 오기 그림 너비
그림 목록 자원 이 서버 에서 가 져 오 면 그림 의 실제 너비 와 높이 를 먼저 가 져 와 야 합 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

this. previewlist = []; //    
let imglist = […]; //             
show (index) {
  for (let i = 0; i < imglist.length; i++) {
    //         
    let newImage = {};
    let img = new Image();
    img.src = imglist[i];
    img.onload = function () {
      newImage.src = imglist[i];
      newImage.w = img.width;
      newImage.h = img.height;
    };
    this.previewlist.push(newImage);
  }
  //      javascript         。                       ， setTimeout  0ms   。
  setTimeout(() => {
    this.$preview.open(index, this.previewlist);
  }, 0);
}

그림 회전 기능 추가
기본 적 인 기능 은 전체 화면,확대,공유,이미지 전환 등 이 있 습 니 다.가끔 우 리 는 그림 회전 기능 이 필요 합 니 다.어떻게 해 야 합 니까?그것 은 스스로 플러그 인 을 고 칠 수 밖 에 없다.
STEP 1:회전 아이콘 추가
아이콘 파일 경로:nodemodules\photoswipe\dist\default-skin

원래 앞의 8 개의 그림 만 있 었 는데 뒤에 있 는 조금 큰 회전 아이콘 은 내 가 추가 한 것 이다.물론 너 도 사 이 즈 를 원래 의 것 과 똑 같이 설정 할 수 있다.
두 번 째 단계:페이지 에 회전 단 추 를 추가 합 니 다.
페이지 파일 경로:nodemodules\vue-preview\src\plugins\preview\preview.vue

세 번 째 단계:회전 단 추 를 추가 하 는 스타일
스타일 파일 경로:nodemodules\photoswipe\dist\default-skin

.pswp__button--rotate {
 background-position: -176px 0;
}

STEP 4:회전 실현 방법
파일 경로:nodemodules\vue-preview\src\plugins\preview\preview.vue

imgRotateFn () {
   this.angle+=90;
   let imgNode = document.getElementsByClassName('pswp__img');
   for (let i = 0; i<imgNode.length; i++) {
      imgNode[i].style.WebkitTransform = 'rotate('+this.angle+'deg)';
   }
 }

여기 서 나 는 핵심 코드 만 붙 였 다.브 라 우 저 호 환 이 필요 하고 그림 을 전환 할 때 그림 각 도 를 0 등 으로 설정 해 야 한다.
테스트 결과


테스트 는 문제 없 이 드디어 퇴근 할 수 있 게 됐어,하하 하.
Tips:플러그 인 을 직접 고치 기 귀 찮 은 파트너 는 건물의 GitHub 창고 에서 변 경 된 파일 을 다운로드 할 수 있 습 니 다.vue-preview 를 설치 한 후"attachment"폴 더 에 있 는 세 개의 파일 로 프로젝트 에 대응 하 는 파일 을 교체 하면"회전"기능 이 있 습 니 다.GitHub 주소:https://github.com/xiongjun0812/vue-preview
오늘 은 여기까지 공유 하 겠 습 니 다.문제 가 있 으 면 댓 글 교 류 를 환영 합 니 다.참고 해 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.