微客导航 » 文章资讯 » vue实现图片预览组件封装与使用

vue实现图片预览组件封装与使用

2023-08-20 01:25:04 153

这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。

子组件







.img-bg{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:9999;
background:rgba(0,0,0,1);
}
.img-bgimg{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}

父组件

在全局样式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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue实现图片预览组件封装与使用

热门推荐

随机推荐