How to implement image preview function in Vue

In today’s web design, image carousel is a very common effect. When using the Vue framework to develop web pages, we can implement this function through Vue plug-ins. This article will provide specific code examples to introduce how to implement the image preview function in Vue.

1. Introducing plug-ins

We can use the Vue plug-in vue-awesome-swiper to implement the image carousel function. Vue-awesome-swiper is a carousel component that supports infinite loop carousels, dynamic addition and deletion of carousel items, responsiveness, and page turning animations.

Use npm to install vue-awesome-swiper:

npm install vue-awesome-swiper --save

Reference swiper and its style in main.js:

import Vue from 'vue'
import App from './App.vue'
import Swiper from 'vue-awesome-swiper'
// import Swiper styles
import 'swiper/dist/css/swiper.css'
Vue.use(Swiper)

new Vue({
  el: '#app',
  render: h => h(App),
})

2. Use the Vue-awesome-swiper component

The following code demonstrates how to use the Vue-awesome-swiper component:

<template>
  <div class="container">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img  src="/static/imghw/default1.png"  data-src="item.url"  class="lazy"  : @click="previewImage(item.url)" / alt="How to implement image preview function in Vue" >
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/1.png',
        },
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/2.png',
        },
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/3.png',
        },
      ],
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
      },
    }
  },
  methods: {
    previewImage(url) {
      this.$modal.show('preview', {
        src: url, // 图片链接，必填
      })
    },
  },
}
</script>

3. Add image preview function

In the above example, when the user clicks on the image , we call a method to preview the image. We use a Vue plug-in called vue-js-modal here to achieve this function.

We can use npm to install the vue-js-modal plug-in:

npm install --save vue-js-modal

Introduce the module in main.js and declare:

import Vue from 'vue'
import App from './App.vue'
import { Modal } from 'vue-js-modal'
Vue.use(Modal, { componentName: 'modal' })

new Vue({
  el: '#app',
  render: h => h(App),
})

Introduce the import statement in the component, and then Use the vue-js-modal component to preview:

<template>
  <modal name="preview">
    <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"  :    style="max-width:90%" / alt="How to implement image preview function in Vue" >
  </modal>
</template>

When we click on the image, we call this.$modal.show('preview', { src: url }), Then we can display this image.

So far, we have successfully added the image preview function. In the process of combining the Vue-awesome-swiper and vue-js-modal plug-ins, we have implemented the image carousel and image preview functions.

The above is the detailed content of How to implement image preview function in Vue. For more information, please follow other related articles on the PHP Chinese website!