程序地带

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、属性方法


名称默认值inlinefalse (启用inline模式)buttontrue (显示右上角关闭按钮)navbartrue(显示缩略图导航)titletrue(显示当前图片的标题)toolbartrue(显示工具栏)tooltiptrue(显示缩放百分比)movabletrue(图片是否可移动)rotatabletrue(图片是否可旋转)scalabletrue(图片是否可翻转)transitiontrue(使用CSS3过度)fullscreentreu(播放时是否全屏)keyboardtrue(是否支持键盘)urlsrc(设置大图片的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/


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/YI_Zyd/article/details/111246422

随机推荐

理想运放传递函数的求解

理想运放传递函数的求解

理想运放传递函数的求解1、传递函数2、理想运放的两种模型①时域模型②S域(复频域)模型3、带有负反馈的两种模型①带有负反馈的时域模型②带有负反馈的S域模型4、传递函数的求解...

稳妥小伙儿 阅读(371)