Use v-viewer combined with vue to preview the album

Recently, there was a need to build a photo album management system, which needed to display pictures according to albums, so I used vue on the front end and tp5 on the back end to build a small system.

The front-end uses the v-viewer component. I encountered a problem and recorded it here; that is, when previewing the picture, since the picture is dynamically loaded, it will be dynamically refreshed during the preview and jump to the first picture by default. As shown in the picture, the solution is to prevent re-updates during preview

The specific steps are as follows:

1. First create a vue project and use vue scaffolding to create it (if you don’t understand, you can check the official documentation , not explained here)

2. Introduce the v-viewer component into the page

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'

3. Calling method, write the following code in the template file

    <viewer :images="images" class="images clearfix" @inited="handleInited">
        <template slot-scope="scope">
            <img v-for="(src,i) in scope.images"
                :src="src" :key="src" :class="&#39;image &#39; + newClass[i] " @click="handleShow(i)">
        </template>
    </viewer>

images are passed in Array, each item is the path URL of the image

4. As long as the back-end interface gets the data, assign the image URL array to images. If you get the image all at once, there is no problem. If there are a lot of pictures, the backend usually obtains the pictures by paging. At this time, it is necessary to wait until all the pictures are loaded and the preview will not jump to the first picture. In order to solve this problem, it is necessary to look at the components. How to deal with it internally? After looking at the code, I found that you only need to comment out the dynamic update of the changes in the monitored images;

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },

and then call the update method when the image is clicked. Refer to the following code

 handleShow(index) {
    this.$viewer.update()
    this.$viewer.view(index) // 预览当前图片
}

Summary: When encountering specific problems, specific analysis is required, and sometimes the source code needs to be changed to solve the problem; (If you have any questions, please consult and discuss, please make a note when applying. WeChat ID: 13163923579)

The above is the detailed content of Use v-viewer combined with vue to preview the album. For more information, please follow other related articles on the PHP Chinese website!