永远对生活充满希望，对于困境与磨难，微笑应对。
前言
在项目中点击小图查看大图，对大图进行旋转、放大、缩小是个很常见的需求，今天就跟大家分享下v-viewer插件如何在vue项目中使用。先看下最终实现的效果(图片较大，点击链接进行查看)
gif效果图
安装插件
- 终端执行
yarn add v-viewer
使用插件
- 在main.js中添加如下代码
import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' // 图片加载插件 Vue.use(Viewer,{name: 'viewer'});
- 在需要的组件中添加如下代码
dom部分
<template> <!--图片查看插件--> <div class="images" v-viewer="{movable: false}" style="display: none"> <img v-for="src in images" :src="src" :key="src"> </div> </template>
js部分
export default { data() { return { images:[], }, mounted: function () { // 图片查看插件 show () { // 找到.images的div挂载到$viewer上 const viewer = this.$el.querySelector('.images').$viewer viewer.show() } } }
- 在方法中调用
需要显示多少张图片，就往images数组中push多少张
viewLargerImage: function(event){ const imgSrc = event.target.src; if(typeof imgSrc !=="undefined"){ // 清空图片数组 this.images = []; this.images.push(imgSrc); this.show(); } }
在线体验地址：chat-system | 示例代码地址：chat-system
更多使用方法,详见插件npm仓库：v-viewer
写在最后
- 文中如有错误，点击下方阅读原文，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
- 文中的链接可在原文中进行查看
- 本文首发于掘金，未经许可禁止转载💌
