# viewerjs
# 1. 介绍
JavaScript image viewer.
首页： https://fengyuanchen.github.io/viewerjs/
仓库： https://github.com/fengyuanchen/viewerjs
# 2. 使用
安装：
npm install viewerjs
使用：
<template>
<div>
<img id="image" src="1.png">
<ul id="image-list">
<li><img src="2.png"></li>
<li><img src="3.png"></li>
<li><img src="4.png"></li>
</ul>
</div>
</template>
<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
export default {
mounted() {
this.imageViewer = new Viewer(document.getElementById('image'));
this.imageListViewer = new Viewer(document.getElementById('image-list'));
},
beforeDestroy() {
this.imageViewer.destroy();
this.imageListViewer.destroy();
},
}
</script>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image view</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.css">
</head>
<body>
<!-- a block container is required -->
<div>
<img id="image" src="https://via.placeholder.com/150/92c952" alt="Picture">
</div>
<div>
<ul id="images">
<li><img src="https://via.placeholder.com/150/771796" alt="Picture 1"></li>
<li><img src="https://via.placeholder.com/150/24f355" alt="Picture 2"></li>
<li><img src="https://via.placeholder.com/150/d32776" alt="Picture 3"></li>
</ul>
</div>
<script type="module">
import Viewer from 'https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.esm.js'
// View an image.
const viewer = new Viewer(document.getElementById('image'));
// Then, show the image by clicking it, or call `viewer.show()`.
// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.
</script>
</body>
</html>
上一篇: 下一篇:
本章目录