vue.js实现双击放大预览功能

本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下

vue.js实现双击放大预览功能_第1张图片

vue.js实现双击放大预览功能_第2张图片

imgPreview组件



引入这个组件

import imgPreview from './imgPreview'
 data:{
  return{
  bigImgShow: false,
  bigImgIndex:'',
  imgList:[],
  }
 }
 components: {
  imgPreview
 }, 
 method:{
  previewImage (imgList, index) {
  if (imgList) {
   this.imgList = imgList
   this.bigImgIndex = index
   this.bigImgShow = true
  }
  },
 }

template里面渲染

 

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue.js实现双击放大预览功能)