VUE中点击图片放大
在我们开辟后台里面我们经常会用到点击图片放大的功能，然后实现这个功能若是本身手写的话需要破费的时候又比力的多，并且思虑的层面可能没有那么的深，随时城市需求发生改变还需要继续扩展！这个时辰我们就需要利用一个插件来达到快速开辟
东西/原料
- Visual Studio Code
- vue2.0+element ui+v-viewer
方式/步调
- 1
起首我们来看下今天的本家儿角【v-viewer】，v-viewer供给点击下一张，上一张，扭转，主动播放，放大等一些我们常用的功能，结果见图
- 2
此刻我们起头安装这个组件到我们的项目里面，号令面板里面我们需要执行一个安装号令【npm install v-viewer --save】
- 3
安装完之后我们在vue项目里面的main.js需要对这个组件进行引用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
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
到了这里我们根基就把【v-viewer】这个组件放在我们的项目里面。在将来我们需要进行利用的时辰，只要在在页面上面直接用就好了，起首在模板里面加上HTML代码
<viewer :images="arrayList">
<img
v-for="(src,index) in arrayList"
:src="src"
:key="index"
class="pro-img"
>
</viewer>
这里的【arrayList】是利用者本身界说的一个数组，这里出格的本家儿意必然如果变量，若是你的图片后台返回的不是一个变量，你就需要本身把它进行一个组装当作数组就好了，图片给的是我今朝在利用的代码，大师看的时辰要连系起来一路理解一下
- 5
好了，到这里就们就实现了点击图片放大的功能了！
注重事项
- 遍历的时辰必然要弄当作一个数组，可能数组对象也可以，我没有测验考试，大师可以去尝尝
- 按照步调走的话，根基是没有问题的
- 感觉不错的话，记得投个票哦
- 发表于 2019-05-16 23:40
- 阅读 ( 906 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章