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

535366

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

阅读量606

点赞数

文章标签： css javascript vue.js

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

本文链接：https://blog.youkuaiyun.com/A535366/article/details/122624540

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件：

<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-layer {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*不限制图片大小，实现居中*/
.img-view .img img {
  width: 9.8rem;
  height: 9.8rem;
  display: block;
  position: fixed;
  left: 0;
  top: 3rem;
  z-index: 1000;
  background-size: 100%, 100%;
}
</style>

父组件：

 <img :src="item.picUrl" alt="" class="icon" @click="clickImg($event)" >
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>

data:{
     showImg: false,
     imgSrc: "",
  }

methods:{
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src;
      // console.log(this.imgSrc);
    },
    viewImg() {
      this.showImg = false;
    },
}

第二种方法：

1.下载插件

npm install v-viewer --save

2. min.js全局引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
 
Vue.use(Viewer)
 
// 配置项
Viewer.setDefaults({
  Options: {
    'inline': true, // 启用 inline 模式
    // 'button': true, // 显示右上角关闭按钮
    // 'navbar': true, // 显示缩略图导航
    // 'title': true, // 显示当前图片的标题
    // 'toolbar': true, // 显示工具栏
    'tooltip': true, // 显示缩放百分比
    'movable': true, // 图片是否可移动
    'zoomable': true, // 图片是否可缩放
    'rotatable': true, // 图片是否可旋转
    'scalable': true, // 图片是否可翻转
    'transition': true, // 使用 CSS3 过度
    'fullscreen': true, // 播放时是否全屏s
    // 'keyboard': true, // 是否支持键盘
    'url': 'data-source' // 设置大图片的 url
  }
})

3.页面使用

<viewer> <img src="@/assets/img.png" /></viewer>

个人喜欢第二种方法