vue插件(v-viewer)图片点击放大功能

vue插件(v-viewer)图片点击放大功能

1、首先是安装

npm install v-viewer --save

2、安装完引用（还要记得引用它的CSS样式）

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

可以全局引用，也可以局部引用，看自个人喜好

3、Vue注册调用

Vue . use(Viewer);
Viewer . setDefaults({
Options: {
	"inline": true,
	"button": true,
	"navbar": true,
	"title": true,
	"toolbar": true,
	"tooltip": true,
	"movable": true,
	"zoomable": true, 
	"rotatable": true,
	"scalable": true,
	"transition": true,
	"fullscreen": true,
	"keyboard": true,
	"url": "data- source"
	}
});

4、属性方法

名称	默认值
inline	false (启用inline模式)
button	true (显示右上角关闭按钮)
navbar	true(显示缩略图导航)
title	true(显示当前图片的标题)
toolbar	true(显示工具栏)
tooltip	true(显示缩放百分比)
movable	true(图片是否可移动)
rotatable	true(图片是否可旋转)
scalable	true(图片是否可翻转)
transition	true(使用CSS3过度)
fullscreen	treu(播放时是否全屏)
keyboard	true(是否支持键盘)
url	src(设置大图片的url)

5、全部代码

<template>
<div id="app">
<viewer
	: images=" images'
	class="viewer"
	ref= "vi ewer"
	@inited=" inited"
>
<template slot-scope="scope" >
	<img v-for="(item, index) in scope . images" :src="item" :key=" index"
	class=" image" >
</template>
</viewer>
	<button type="button" @click=" show" >Show< /button>
</div>
</template>

<script>
import 'viewerjs/dist/viewer.css' 
export default {
	data() {
		return {
			images: ['1.jpg'， '2.jpg']
		}
	},
methods: {
	inited (viewer) {
		this. $viewer = viewer
	}，
	show () {
		this . $viewer . show( )
	}
	}
}
</script>
<style lang= "sCss" scoped>
	. image{
		display: none;
	}
</sty1e>

6、分享链接

https://github.com/fengyuanchen/viewerjs
https://mirari.cc/v-viewer/