当前位置：首页 > VUE

Vue实现图片放大

2026-01-16 03:43:55VUE

Vue实现图片放大功能

使用v-viewer插件 安装v-viewer插件：

npm install v-viewer

在main.js中引入并配置：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

在组件中使用：

<template>
  <div>
    <img v-viewer src="your-image.jpg" style="width: 200px">
  </div>
</template>

自定义实现放大功能 创建图片放大组件：

<template>
  <div>
    <img :src="src" @click="showFull" class="thumbnail">
    <div v-if="isVisible" class="overlay" @click="hideFull">
      <img :src="src" class="full-image">
    </div>
  </div>
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    showFull() {
      this.isVisible = true
    },
    hideFull() {
      this.isVisible = false
    }
  }
}
</script>

<style>
.thumbnail {
  cursor: zoom-in;
  max-width: 200px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.full-image {
  max-width: 90%;
  max-height: 90%;
}
</style>

使用第三方库vue-zoomer 安装vue-zoomer：

npm install vue-zoomer

在组件中使用：

<template>
  <vue-zoomer :img-normal="normalImg" :img-big="bigImg"></vue-zoomer>
</template>

<script>
import VueZoomer from 'vue-zoomer'
export default {
  components: { VueZoomer },
  data() {
    return {
      normalImg: 'small-image.jpg',
      bigImg: 'large-image.jpg'
    }
  }
}
</script>

注意事项

Vue实现图片放大