单击图片，全屏展示两种方法

535366

已于 2022-05-23 17:50:50 修改

阅读量563

点赞数

文章标签： css javascript vue.js

于 2022-01-21 16:36:28 首次发布

本文链接：https://blog.csdn.net/A535366/article/details/122624540

版权

本文介绍了两种实现单击图片全屏展示的方法。第一种方法未详述，第二种方法包括下载插件、全局引入min.js文件及在页面中应用。作者个人偏好第二种方法。

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

子组件：

<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
       <div class="img-layer"></div>
            <div class="img">
                <img :src="imgSrc">
            </div>
        </div>
    </transition>
</template>
<script>
export default {
  props: ["imgSrc"],
  methods: {
    bigImg() {
      // 发送事件
      this.$emit("clickit");
    },
  },
};
</script>
<style scoped>
/*动画*/
.fade-enter-active,
.fade-leave-active {
  transition: all 0s linear;
  transform: translate3D(0, 0, 0);
}

.fade-enter,
.fade-leave-active {
  transform: translate3D(100%, 0, 0);
}

/* bigimg */

.img-view {
  position: relative;
  width: 100%;
  height: 100%;
}

/*遮罩层样式*/
.img-view .img-