Vue图片浏览组件v-viewer简单应用

v-viewer
用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。

安装

npm install v-viewer

使用

引用插件
main.js

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)
Viewer.setDefaults({
	navbar: false, //底部缩略图
	toolbar: false, //底部工具栏
	button: false, //右上角按钮
	title: false, //当前图片标题
	movable: true, //是否可以移动
	zoomable: true, //是否可以缩放
	transition: false //使用 CSS3 过度
})

组件中使用
demo.vue

<template>
	<div>
		<viewer :options="options" @inited="inited">
			<img width=300  :src="img">
		</viewer>
		<!-- 指令用法 -->
		<div v-viewer="options">
			<img width=300  :src="img">
		</div >

	</div>
</template>

<script>
export default {
	name: 'VViewer'