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

最新推荐文章于 2024-08-06 17:41:12 发布

置顶

qq_41624010

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量2.3k

点赞数

分类专栏：记录文章标签：前端 vue 图片预览

本文链接：https://blog.csdn.net/qq_41624010/article/details/81870511

版权

本文介绍了如何在移动端Vue项目中，利用Mint-UI库实现图片预览功能。通过子组件与父组件的通信，确保每个图片点击后都能实现放大预览，并在全局样式中调整预览图居中显示。

摘要由CSDN通过智能技术生成

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

子组件

<!--html部分-->
<template>
    <div id="imgEnlarge" ref="imgEnlarge" class="img-bg" @click="imgBgHide" v-show="isShow">
          <mt-swipe :auto="0" :show-indicators="false" :continuous=false :defaultIndex="defaultIndex" @change="handleChange">
                <mt-swipe-item v-for="(item,index) in imgSrc" :key="index">
                      <img v-lazy="item" @click="handleClick"/>
                </mt-swipe-item>
          </mt-swipe>
    </div>
</template>
<!--js部分-->
<script>
    export default{
        data(){
            return{
                sc