这篇文章主要为大家详细介绍了vue.js实现双击放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js实现双击放大预览的具体代码，供大家参考，具体内容如下
imgPreview组件
1">1"> e.stopPropagation()" class="btns"> .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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是vue.js实现双击放大预览功能的详细内容，更多请关注本站其它相关文章！
