一、需求
- 今天接到一个需求，就是要求制作一个预览图片的功能，要求图片可以放大缩小、旋转、图片预览要有蒙层效果，esc可以关闭预览
- 由于系统中使用了vue，所以要求预览图片的组件要支持vue，一顿百度以后，找到一款合适的，就是 v-viewer
二、使用
demo
github
中文文档
三、上代码，拷贝即可用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue单张或多张图片预览</title>
</head>
<body>
<div>
<p>参考一：<a href="https://mirari.cc/v-viewer/">Demo</a></p>
<p>参考二：<a href="https://github.com/mirari/v-viewer">github</a></p>
<p>参考三：<a
href="https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/">中文文档</a>
</p>
</div>
<div id="app" style="margin-top:100px ;">
<h2>Demo</h2>
<div class="showOne" v-viewer="{movable: true}">
<img src="" style="display: none;">
</div>
<button type="button" @click="showOne">单张显示</button>
<p></p>
<div class="showThree" v-viewer="{movable: true}">
<img style="display: none;" v-for="src in images" :src="src" :key="src">
</div>
<button type="button" @click="showThree">多张张显示</button>
</div>
</body>
<link href="https://unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="https://unpkg.com/v-viewer/dist/v-viewer.js"></script>
<script>
Vue.use(VueViewer.default);
var app = new Vue({
el: '#app',
data: {
images: [
"https://picsum.photos/500/500",
"https://picsum.photos/500/500",
"https://picsum.photos/500/500"
]
},
methods: {
showOne() {
this.$el.querySelector('.showOne img').src = "https://picsum.photos/500/500"
const viewer = this.$el.querySelector('.showOne').$viewer
viewer.show()
},
showThree() {
const viewer = this.$el.querySelector('.showThree').$viewer
viewer.show()
}
}
});
</script>
</html>