这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-preview是一个常用的图片查看器，微博网页版就是用的这个插件：
我在项目中也用过这个插件，总体来说，还是比较满意。但是缺少一个图片旋转功能。
安装使用
第一步：安装
npm i vue-preview -S
第二步：引用配置
import VuePreview from 'vue-preview' Vue.use(VuePreview) Vue.use(preview, { mainClass: 'pswp--minimal--dark', barsSize: {top: 0, bottom: 0}, captionEl: false, fullscreenEl: false, shareEl: false, bgOpacity: 0.85, tapToClose: true, tapToToggleControls: fa<span>本文来源gaodai#ma#com搞*!代#%^码网5</span>lse })
第三步：使用
// 定义预览图片列表 previewlist: [ { src: ‘./pic01.jpg-600', w: 1200, h: 900 }, { src: ‘./pic01.jpg-600', w: 1200, h: 900 } ] // 给图片添加“preview-img”类(必须添加且要同名)，以及绑定“show”方法 // 点击图片触发预览方法 show (index) { this.$preview.open(index, this. previewlist); }
动态获取图片宽高
如果图片列表资源是从服务器获取，则需要先获取图片的真实宽高，具体代码如下：
this. previewlist = []; //查看列表 let imglist = […]; //从服务器获取的图片地址列表 show (index) { for (let i = 0; i { this.$preview.open(index, this.previewlist); }, 0); }
新增图片旋转功能
默认的功能有全屏、放大、分享、图片切换等，有时候我们还需要图片旋转功能，怎么办呢？那只能自己动手改插件了。
第一步：添加旋转图标
图标文件路径：node_modules\photoswipe\dist\default-skin
原来只有前面8个图片，后面那个稍微大一点的旋转图标是我加上去的，当然你也可以把尺寸设置为和原来的一样。
第二步：添加旋转按钮到页面
页面文件路径：node_modules\vue-preview\src\plugins\preview\preview.vue
第三步：添加旋转按钮的样式
样式文件路径：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这里我只贴出了关键代码，需要你自己做浏览器兼容，以及切换图片时，应该将图片角度设置为0等。
测试结果
测试没有问题，终于可以下班了，哈哈哈。
Tips：懒得自己动手改插件的伙伴，可以在楼主的GitHub仓库下载改好后的文件，在你安装好 vue-preview 后用“attachment”文件夹中的三个文件替换你项目中的对应文件就拥有“旋转”功能了。GitHub地址：https://github.com/xiongjun0812/vue-preview
以上就是vue-preview动态获取图片宽高并增加旋转功能的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue-preview动态获取图片宽高并增加旋转功能的实现
