This is the 9th day of my participation in the More text Challenge. For details, see more text Challenge

Vue-preview is a common image viewer. This plugin is used for the Weibo web version:

I have also used this plugin in my projects and, overall, I am satisfied with it. But it lacks an image rotation function.

Install and use

Step 1: Install
npm i vue-preview -S
Copy the code
Step 2: Reference the configuration
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
})
Copy the code
Step 3: Use
// Define previewlist: [{SRC: './pic01.jpg ', w: 1200, h: 900}, {SRC: './pic01.jpg ', w: 1200, h: 900}, 900}] // Add a "preview-img" class to the image (must be added with the same name), <img: SRC ="decodeURIComponent(item.name)" class="preview-img" @click="show(index)"> <img: SRC ="decodeURIComponent(item.name)" class="preview-img" @click="show(index)" (index) { this.$preview.open(index, this.previewlist); }Copy the code

Dynamically obtain the image width and height

If the image list resource is obtained from the server, the true width and height of the image need to be obtained first. The specific code is as follows:

this. previewlist = []; Let imglist = [...] ; Show (index) {for (let I = 0; i < imglist.length; I++) {// get the actual image size 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 is normally executed sequentially. But we might let the statement following the statement execute before executing itself, using a setTimeout delay of 0ms. setTimeout(() => { this.$preview.open(index, this.previewlist); }, 0); }Copy the code

Added image rotation function

The default functions include full screen, zoom in, share, image switch, etc. Sometimes we also need image rotation function, how to do? You have to change the plugin yourself.

Step 1: Add the rotation icon

Icon file path: node_modules\photoswipe\dist\default-skin



Originally, there were only the first 8 images. I added the larger rotation icon in the back, but you can also set the size to the same as the original.

Step 2: Add the rotate button to the page

File path: node_modules\vue-preview\ SRC \plugins\preview\preview

<button class="pswp__button --rotate" @click="imgRotateFn"></button>Copy the code
Step 3: Add the style of the rotate button

Style file path: node_modules\photoswipe\dist\default-skin

.pswp__button--rotate {
  background-position: -176px 0;
}
Copy the code
Step 4: Implement the rotation method

File path: node_modules\vue-preview\ SRC \plugins\preview\preview

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)'; }}Copy the code

I’ve only posted the key code here, which requires you to do your own browser compatibility, and should set the image Angle to 0 when switching images.

Tips

If you don’t want to change the plugin yourself, you can download it from the GitHub repository. After you install Vue-Preview, replace the three files in the attachment folder with the corresponding files in your project. GitHub: github.com/xiongjun081…