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

前端  /  管理员 发布于 4年前   538

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

子组件

父组件

在全局样式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制作图片轮播组件思路详解
• vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
• vue2.0 使用element-ui里的upload组件实现图片预览效果方法
• VUE开发一个图片轮播的组件示例代码
• vue图片上传本地预览组件使用详解
• vue项目中实现图片预览的公用组件功能
• vue基于viewer实现的图片查看器功能
• 基于vue.js轮播组件vue-awesome-swiper实现轮播图
• 利用Vue实现移动端图片轮播组件的方法实例
• Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】