vue2中使用viewer.js的实现示例
作者：王阔阔
本文主要介绍了vue2中使用viewer.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
先展示下实现效果
简单的图片放大缩小、切换上一张下一张、左右旋转可使用ElementUi中的el-image组件，但像上下左右
镜像翻转el-image组件就无法满足，因此我这里使用到了viewer.js。
1. 安装插件
npm install v-viewer@1.7.4
2. main.js
import "viewerjs/dist/viewer.css"; import Viewer from "v-viewer"; Vue.use(Viewer);
3. 图片查看器组件
<template>
<div class="pics-view" v-viewer="viewerOptions">
<div
class="pics-item"
v-for="item in picsList"
:key="item.title + item.url"
>
<h4 class="title" :title="item.title">{{ item.title }}</h4>
<img :src="item.url" :alt="item.title" class="preview-img" />
</div>
</div>
</template>
<script>
export default {
props: {
// 图片列表（title、url）
picsList: {
type: Array,
default: () => [],
},
},
data() {
return {
// 配置viewer.js的参数
viewerOptions: {
navbar: true,
title: true,
toolbar: {
prev: true,
next: true,
zoomIn: true,
zoomOut: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true,
reset: true,
},
button: function () {
const container = document.createElement("div");
container.className = "viewer-toolbar-custom";
// 上一张按钮
const prevBtn = document.createElement("button");
prevBtn.type = "button";
prevBtn.className = "viewer-button viewer-prev";
prevBtn.innerHTML = '<i class="el-icon-arrow-left"></i>';
prevBtn.title = "上一张";
container.appendChild(prevBtn);
// 下一张按钮
const nextBtn = document.createElement("button");
nextBtn.type = "button";
nextBtn.className = "viewer-button viewer-next";
nextBtn.innerHTML = '<i class="el-icon-arrow-right"></i>';
nextBtn.title = "下一张";
container.appendChild(nextBtn);
return container;
},
initialized: function (viewer) {
// 绑定上一张事件
const prevBtn = viewer.element.querySelector(".viewer-prev");
prevBtn.addEventListener("click", () => viewer.prev());
// 绑定下一张事件
const nextBtn = viewer.element.querySelector(".viewer-next");
nextBtn.addEventListener("click", () => viewer.next());
},
},
};
},
};
</script>
<style scoped lang="scss">
.pics-view {
display: flex;
flex-wrap: wrap;
gap: 20px;
.pics-item {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
.title {
width: 100%;
padding: 4px;
background-color: #ccc;
color: #fff;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-img {
width: 100%;
height: 100px;
object-fit: contain;
cursor: pointer;
border: 1px solid #eee;
border-radius: 4px;
transition: all 0.3s;
border: 1px solid #ccc;
&:hover {
border-color: #409eff;
}
}
}
}
</style>到此这篇关于vue2中使用viewer.js的实现示例的文章就介绍到这了,更多相关vue2使用viewer.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！