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="描述文字">

参考链接


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: