Vue图片预览插件viewerjs

本文介绍如何在Vue项目中使用ViewerJS插件实现图片预览功能,包括安装步骤、代码示例及自定义配置方法,帮助开发者轻松集成图片查看器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GitHub地址:https://github.com/fengyuanchen/viewerjs
1、安装:npm install v-viewer --save
2、在vue中引用

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

3、vue注册调用,再调用setDefaults方法自定义配置。

Vue.use(Viewer);
Viewer.setDefaults({
  'inline':true,
  'button':true, //右上角按钮
  "navbar": true, //底部缩略图
  "title": true, //当前图片标题
  "toolbar": true, //底部工具栏
  "tooltip": true, //显示缩放百分比
  "movable": true, //是否可以移动
  "zoomable": true, //是否可以缩放
  "rotatable": true, //是否可旋转
  "scalable": true, //是否可翻转
  "transition": true, //使用 CSS3 过度
  "fullscreen": true, //播放时是否全屏
  "keyboard": true, //是否支持键盘
  "url": "data-source",
  ready: function (e) {
    console.log(e.type,'组件以初始化');
  },
  show: function (e) {
    console.log(e.type,'图片显示开始');
  },
  shown: function (e) {
    console.log(e.type,'图片显示结束');
  },
  hide: function (e) {
    console.log(e.type,'图片隐藏完成');
  },
  hidde
### Vue图片预览插件或实现方法 在Vue中实现图片预览功能,可以通过使用现有的插件或自行开发组件来完成。以下是几种常见的实现方式: #### 方法一:使用 `vue-photo-preview` 插件 通过引入 `vue-photo-preview` 插件,可以快速实现图片预览功能。该插件支持全局注册,并且提供了丰富的配置选项[^2]。 ```javascript // main.js import preview from 'vue-photo-preview'; import 'vue-photo-preview/dist/skin.css'; Vue.use(preview); ``` 在模板中使用时,只需为 `<img>` 标签绑定 `preview` 和 `preview-text` 属性即可。 ```html <template> <div class="content"> <h1>preview图片预览Demo</h1> <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title" > </div> </template> <script> export default { data() { return { imgs: [ { url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", title: "图片1", preview: "1" }, { url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg", title: "图片2", preview: "1" } ] }; } }; </script> <style> .content img { width: 80px; height: 80px; padding: 0 5px; } </style> ``` #### 方法二:使用 `v-viewer` 插件 `v-viewer` 是一个基于 Viewer.js 的 Vue 插件,提供了更灵活的配置和更好的用户体验[^3]。 ```javascript // main.js import 'viewerjs/dist/viewer.css'; import Viewer from 'v-viewer'; Vue.use(Viewer); Viewer.setDefaults({ zIndexInline: 9999 }); ``` 在组件中使用时,将需要预览图片包裹在 `<viewer>` 标签内即可。 ```html <template> <div class="el-input el-input--small" v-if="demoList.length > 0"> <viewer> <img width="150" v-for="src in demoList" :src="src.imgurl" :key="src.name" > </viewer> </div> </template> <script> export default { data() { return { demoList: [ { name: 'a', imgurl: require('../../assets/timg1.jpg') } ] }; } }; </script> ``` #### 方法三:自定义图片预览组件 如果需要更高的定制化程度,可以创建一个自定义的图片预览组件。以下是一个简单的示例[^4]。 ```javascript // PrevImg.vue <template> <div> <img v-for="(item, index) in images" :src="item.url" :key="index" @click="showPreview(index)" > <div v-if="showModal" class="modal"> <img :src="currentImage.url"> <button @click="closeModal">关闭</button> </div> </div> </template> <script> export default { data() { return { images: [ { url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" }, { url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" } ], showModal: false, currentImage: {} }; }, methods: { showPreview(index) { this.currentImage = this.images[index]; this.showModal = true; }, closeModal() { this.showModal = false; } } }; </script> <style> .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; } </style> ``` ### 常用配置选项 在使用插件时,可以根据需求调整以下常用配置[^4]: - `fullscreenEl`: 是否显示全屏按钮。 - `shareEl`: 是否显示分享按钮。 - `arrowEl`: 是否显示左右箭头。 - `preloaderEl`: 是否显示加载动画。 - `loop`: 是否循环播放。 - `bgOpacity`: 背景透明度。 - `showHideOpacity`: 图片淡入淡出效果。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值