vue实现点击图片，图片放大效果

最新推荐文章于 2024-04-27 12:14:03 发布

小果子^_^

最新推荐文章于 2024-04-27 12:14:03 发布

阅读量624

点赞数

分类专栏： Vue 文章标签： vue.js javascript

原文链接：https://www.cnblogs.com/zengyu123/p/17807768.html

版权

Vue 专栏收录该内容

61 篇文章 5 订阅

订阅专栏

vue实现点击图片，图片放大效果

首先在template中插入img，并设置点击事件，这个时候是小图标

<template>
  <div>
    <img src="@/assets/images/avatar.png" @click="imgShow()" />  </div>
</template>

data定义点击放大的图片url，imageUrl为点击后放大的大图的url

data() {
    return {
      imageUrl: require('@/assets/images/avatar.png')
    }
  },

定义方法

methods: {
    imgShow() {
      const image = new Image()
      image.src = this.imageUrl
      image.onload = () => {
        //创建弹出层
        const previewContatiner = document.createElement('div')
        previewContatiner.style.position = 'fixed'
        previewContatiner.style.top = 0
        previewContatiner.style.bottom = 0
        previewContatiner.style.left = 0
        previewContatiner.style.right = 0
        previewContatiner.style.zIndex = 9999
        previewContatiner.style.backgroundColor = 'rgba(0,0,0,0.8)'
        previewContatiner.style.display = 'flex'
        previewContatiner.style.justifyContent = 'center'
        previewContatiner.style.alignItems = 'center'
        document.body.appendChild(previewContatiner)
        //在弹出层增加图片
        const previewImage = document.createElement('img')
        previewImage.src = this.imageUrl
        previewImage.style.maxWidth = '80%'
        previewImage.style.maxHeight = '80%'
        previewImage.style.zIndex = 9999
        previewContatiner.appendChild(previewImage)
        //点击弹出层，关闭预览
        previewContatiner.addEventListener('click', () => {
          document.body.removeChild(previewContatiner)
        })
      }
      image.onerror = function () {
        console.log('图片加载失败')
      }
    }
  }