Vue常用插件：vue-photo-preview

简介

• Vue中的图片查看器插件
• 可以用来放大展示图片
• 复用的组件，有时候图片不能及时更新，可以使用this.$previewRefresh()手动更新

安装

插件安装：npm i vue-photo-preview --save

使用

• src/main.js入口文件中引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

Vue.use(preview, {
  fullscreenEl: false, // 关闭全屏按钮
  zoomEl: false, // 关闭放大按钮
  tapToClose: true, // 点击关闭图片
  loadingIndicatorDelay: 10
})

• 在vue组件中使用

<img src="img.imgUrl" :preview="index" preview-text="描述文字">

参考链接

• vue前端开发–图片查看大图插件 vue-photo-preview