如何实现vue-preview动态获取图片宽高并增加旋转功能

这篇文章主要讲解了如何实现vue-preview动态获取图片宽高并增加旋转功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件:

我在项目中也用过这个插件,总体来说,还是比较满意。但是缺少一个图片旋转功能。

<强>安装使用

<强>第一步:安装

npm我vue-preview - s

<强>第二步:引用配置

从& # 39;进口VuePreview vue-preview& # 39;
　　Vue.use (VuePreview)
　　Vue。使用(预览,{
　　mainClass: & # 39; pswp——最小——黑暗# 39;
　　barsSize:{: 0,底部:0},
　　captionEl:假的,
　　fullscreenEl:假的,
　　shareEl:假的,
　　bgOpacity: 0.85,
　　tapToClose:没错,
　　tapToToggleControls:假
　　})

<强>第三步:使用

//定义预览图片列表
　　previewlist:(
　　{
　　src:“。/pic01.jpg& # 39;
　　w: 1200年,
　　h: 900
　　},
　　{
　　src:“。/pic01.jpg& # 39;
　　w: 1200年,
　　h: 900
　　}
　　]//给图片添加“preview-img”类(必须添加且要同名),以及绑定“秀”方法
　　& lt; img src=https://www.yisu.com/zixun/眃ecodeURIComponent (item.name)”class=皃review-img”@click="显示(索引)">//点击图片触发预览方法
　　显示(指数){
　　美元的预览。(指数,这个开放。previewlist);
　　}

<>强动态获取图片宽高

如果图片列表资源是从服务器获取,则需要先获取图片的真实宽高,具体代码如下:

。previewlist=[];//查看列表 　　让imglist=[…];//从服务器获取的图片地址列表 　　显示(指数){ 　　(让我=0;我& lt;imglist.length;我+ +){//获取图片实际大小 　　让newImage={}; 　　让img=新形象(); 　　img。src=https://www.yisu.com/zixun/imglist[我]; 　　img。onload=function () { 　　newImage。src=imglist[我]; 　　newImage。w=img.width; 　　newImage。h=img.height; 　　}; 　　this.previewlist.push (newImage); 　　}//正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身,用setTimeout延时0女士来实现。 　　setTimeout (()=> { 　　美元的预览。打开(指数、this.previewlist); 　　},0); 　　}

<>强新增图片旋转功能

默认的功能有全屏,放大,分享,图片切换等,有时候我们还需要图片旋转功能,怎么办呢?那只能自己动手改插件了。

<强>第一步:添加旋转图标

图标文件路径:node_modules \ photoswipe \ dist \默认皮肤

原来只有前面8个图片,后面那个稍微大一点的旋转图标是我加上去的,当然你也可以把尺寸设置为和原来的一样。

<强>第二步:添加旋转按钮到页面

页面文件路径:node_modules \ vue-preview \ src \ plugins \预览\ preview.vue

& lt;按钮类=皃swp__button pswp__button——rotate"title=靶?@click=癷mgRotateFn"祝辞& lt;/button>

<强>第三步:添加旋转按钮的样式

样式文件路径:node_modules \ photoswipe \ dist \默认皮肤

。pswp__button——旋转{ 　　背景位置:-176 px 0; 　　}

<强>第四步:实现旋转方法

文件路径:node_modules \ vue-preview \ src \ plugins \预览\预览。vue

 imgRotateFn () {
　　this.angle +=90;
　　让imgNode=document.getElementsByClassName (& # 39; pswp__img& # 39;);
　　(让我=0;i 
这里我只贴出了关键代码,需要你自己做浏览器兼容,以及切换图片时,应该将图片角度设置为0等。
 
 <强>测试结果 
 
  
 
  
 
测试没有问题,终于可以下班了,哈哈哈。
 
看完上述内容,是不是对如何实现vue-preview动态获取图片宽高并增加旋转功能有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
如何实现vue-preview动态获取图片宽高并增加旋转功能