vue-preview动态获取图片宽高并增加旋转功能的实现
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件:
原来只有前面8个图片,后面那个稍微大一点的旋转图标是我加上去的,当然你也可以把尺寸设置为和原来的一样。
第二步:添加旋转按钮到页面
页面文件路径:node_modules\vue-preview\src\plugins\preview\preview.vue
<button class="pswp__button pswp__button--rotate" title="旋转" @click="imgRotateFn"></button>
第三步:添加旋转按钮的样式
样式文件路径:node_modules\photoswipe\dist\default-skin
.pswp__button--rotate { background-position: -176px 0; }
第四步:实现旋转方法
文件路径:node_modules\vue-preview\src\plugins\preview\preview.vue
imgRotateFn () { this.angle+=90; let imgNode = document.getElementsByClassName('pswp__img'); for (let i = 0; i<imgNode.length; i++) { imgNode[i].style.WebkitTransform = 'rotate('+this.angle+'deg)'; } }
这里我只贴出了关键代码,需要你自己做浏览器兼容,以及切换图片时,应该将图片角度设置为0等。
测试结果
测试没有问题,终于可以下班了,哈哈哈。
Tips:懒得自己动手改插件的伙伴,可以在楼主的GitHub仓库下载改好后的文件,在你安装好 vue-preview 后用“attachment”文件夹中的三个文件替换你项目中的对应文件就拥有“旋转”功能了。GitHub地址:https://github.com/xiongjun0812/vue-preview
今天就分享到这里,有问题欢迎留言交流,希望能给大家一个参考,也希望大家多多支持来客网。