这篇文章主要为大家详细介绍了vue.js实现双击放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js实现双击放大预览的具体代码，供大家参考，具体内容如下
imgPreview组件
<div class="vue-uploader"> <div class="img_model"> <div class="img-btn btn-pre">1"><i class="el-icon-arrow-left"></i></div><div class="img-btn btn-next">1"><i class="el-icon-arrow-right"></i></div><div class="center-box"> <div class="img_box"> </div></div><div>e.stopPropagation()" class="btns"> </div></div></div> .img_model{ position: fixed; width: 100%; min-height: 100%; background: rgba(0,0,0,.5); top: 0; left: 0; z-index: 9999; /* text-align: center; */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .center-box { position: relative; max-width: 90%; } .img_model .img_box { max-width: 100%; max-height: 800px; overflow-y: scroll; } .img_model .img_box::-webkit-scrollbar { display: none; } .img_model .img_box img{ max-width: 100%; } .img_model .img-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; width: 50px; height: 70px; font-size: 30px; line-height: 70px; text-align: center; background: rgba(255, 255, 255, .3); color: #FFF; } .img_model .btn-pre { left: 5%; } .img_model .btn-next { right: 5%; } .img_model .img_box .btn-next { right: 20rpx; } .img_model .btns{ position: fixed; bottom: 25px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
引入这个组件
import imgPreview from './imgPreview' data:{ return{ bigImgShow: false, bigImgIndex:'', imgList:[], } } components: { imgPreview }, method:{ previewImage (imgList, index) { if (imgList) { this.imgList = imgList this.bigImgIndex = index this.bigImgShow = true } }, }
template里面渲染
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue.js实现双击放大预览功能的详细内容，更多请关注gao
本文来源gao!%daima.com搞$代*!码9网(
daima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js实现双击放大预览功能
转载请注明原文链接：vue.js实现双击放大预览功能
