一、单纯的放大/缩小图片
1.插件安装
npm install vue-directive-image-previewer --save
2.项目中main.js引用
import vueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-image-previewer/dist/assets/style.css'Vue.use(vueDirectiveImagePreviewer)
3.在Vue中使用(v-image-preview)
<img v-image-preview src="xxx.jpg"/>
二、放大/缩小、移动、关闭图片
1.插件安装
npm install vue-photo-preview --save
2.项目中main.js引用
import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)
3.在Vue中使用
//在img标签添加preview属性 preview值相同即表示为同一组<img src="xxx.jpg" preview="0" preview-text="描述文字">//分组<img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字">
