Vue实现图片大图预览,v-viewer组件的使用方法演示

简介: Vue实现图片大图预览,v-viewer组件的使用方法演示

先看下效果图:

点击图片就会进入预览,还包括图片名和原图大小、工具栏等。

aedea29db7634dccbf687217c3199ec0.png

首先需要安装 v-viewer

npm install v-viewer

d83620250f4346f892bcb62ec3923d91.png

然后在 main.js 中进行导入。


import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

实例使用中,只需要用 viewer 包住图片即可。

<viewer>
  <img alt="a duck" src="../assets/duck.jpg">
</viewer>

如果想隐藏工具栏或图片名称等。

直接在引用时设置下默认配置。

下面 4 个配置分别是标题、工具栏、导航栏、关闭按钮,可以选择性隐藏。

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  title: false,
  toolbar: false,
  navbar: false,
  button: false
})

都关闭后的效果图:

989b808a5ce74e94ba35ba5723930d9f.png

喜欢的点个赞❤吧!

目录
相关文章
|
1天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
1天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
10 3
|
1天前
|
JavaScript 前端开发 开发者
Vue的神奇解锁:冒险的开始
Vue的神奇解锁:冒险的开始
5 1
|
2天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
8 0
|
2天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
8 1
|
2天前
|
JavaScript
vue2_引入Ant design vue
vue2_引入Ant design vue
7 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 4
|
3天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
3天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
7 1
|
3天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>