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/