面向vue的image viewer组件,支持基于view.js的旋转、缩放等
一、安装依赖
npm install v-viewer
npm i -S viewerjs
二、全局引入
main.js
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(Viewer);
三、页面引用
<template>
<div id="app">
<!-- 方式一： 指令 directive -->
<div class="images" v-viewer>
<img src="1.jpg">
<img src="2.jpg">
...
</div>
<!-- 方式二： 组件 component -->
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src">
</viewer>
</div>
</template>
<script>
export default {
data() {
images: ['1.jpg', '2.jpg']
}
}
</script>
四、官网文档
GitHub：github.com/mirari/v-vi…
