vue实现点击图片放大图片

转自这篇文章学习的：https://blog.csdn.net/y895315416/article/details/82963396?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_v2~rank_aggregation-6-82963396.pc_agg_rank_aggregation&utm_term=%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7vue&spm=1000.2123.3001.4430

vue实现点击图片放大图片

使用vue一个组件vue-directive-image-previewer

A Vue.js project for tag img, click img to zoom out to full screen.

安装vue-directive-image-previewer

命令行

npm install vue-directive-image-previewer -D

main.js文件
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)    

components
<template>
  <div>
      <img v-image-preview src="picture-url"/>
  </div>
</template>