这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。
子组件
<!--html部分--> <div id="imgEnlarge" class="img-bg"> </div><!--js部分--><!--样式部分--> .img-bg { width:100%; height:100%; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,1); } .img-bg img{ width:auto; height:auto; max-width:100%; max-height:100%; }
父组件
<!--html部分--> <!--js部分-->
在全局样本文来源gaodai$ma#com搞$$代**码)网@式global.css里面设置图片预览居中
/*图片点击放大组件中swipe图片居中*/ #imgEnlarge .mint-swipe-item-wrap > div { visibility:hidden; display:flex; -moz-box-pack:center; -webkit-box-pack:center; justify-content:center; -moz-box-align:center; -webkit-box-align:center; align-items:center; -webkit-align-items:center; } #imgEnlarge .mint-swipe-item-wrap > div.is-active { visibility:visible; display:flex; -moz-box-pack:center; -webkit-box-pack:center; justify-content:center; -moz-box-align:center; -webkit-box-align:center; align-items:center; -webkit-align-items:center; }
以上就是vue实现图片预览组件封装与使用的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现图片预览组件封装与使用
转载请注明原文链接：vue实现图片预览组件封装与使用
