巧用工具，Vue 集成 medium-zoom 实现图片缩放

巧用工具，Vue 集成 medium-zoom 实现图片缩放

在现代网页开发中，为用户提供良好的视觉体验至关重要。当涉及到展示图片时，一个能够实现图片缩放的功能可以极大地提升用户对内容的浏览感受。在 Vue 框架下，我们可以巧妙地集成 medium-zoom 这个强大的工具，为我们的项目带来流畅而便捷的图片缩放效果。无论你是 Vue3 还是 Vue2 的开发者，都能从本文中找到详细的集成方法和实用的示例。

介绍medium-zoom

一个用于缩放图像的 JavaScript 库，类似 Medium。

Medium Zoom是一个JavaScript库，可以与任何框架一起使用。

github地址是：medium-zoom

从github上看它能集成：

1. React
2. React Markdown
3. Vue
4. Svelte

我只用过Vue下面我用Vue2和Vue3对medium-zoom进行集成。

Vue3集成 medium-zoom 示例

1、安装medium-zoom

npm install medium-zoom

2、 创建 ImageZoom.vue 组件

<script setup lang="ts">
import { watch, ImgHTMLAttributes, ComponentPublicInstance } from 'vue'
import mediumZoom, { Zoom, ZoomOptions } from 'medium-zoom'



interface Props extends /* @vue-ignore */  ImgHTMLAttributes {
  options?: ZoomOptions;
}

const props = defineProps<Props>();

let zoom: Zoom | null = null

function getZoom() {
  if (zoom === null) {
    zoom = mediumZoom(props.options)
  }

  return zoom
}

function attachZoom(ref: Element | ComponentPublicInstance | null) {
  const image = ref as HTMLImageElement | null
  const zoom = getZoom()

  if (image) {
    zoom.attach(image)
  } else {
    zoom.detach()
  }
}

watch(() => props.options, (options) => {
  const zoom = getZoom()
  zoom.update(options || {})
})
</script>

<template>
  <img :ref="attachZoom" />
</template>

3、在你的主组件中使用 ImageZoom.vue

<template>
  <ImageZoom
      src="https://random.dog/d467a3b8-ade5-4d68-810a-95fbb32a3cfc.jpg"
      alt="dog img"
      class="dog-img"
  />
</template>

<script lang="ts" setup name="APP">
import ImageZoom from './components/ImageZoom.vue'

</script>

<style scoped>

.dog-img {
  max-width: 100%;
  max-height: 200px; /* 限制图片最大高度为400px */
  width: auto;
  height: auto;
  border-radius: 10px; /* 添加圆角样式 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  margin-bottom: 20px;
}

</style>

看下效果。

Vue2集成 medium-zoom 示例

Vue2的集成我是根据Vue3的集成示例写的。下面是具体的代码。

1、安装medium-zoom

npm install medium-zoom

2、 创建 ImageZoom.vue 组件

<template>
  <img :src="src" :alt="alt" ref="zoomableImage" class="zoomable" />
</template>

<script>
import mediumZoom from 'medium-zoom';

export default {
  props: {
    src: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    // 在组件挂载后初始化 mediumZoom
    mediumZoom(this.$refs.zoomableImage, this.options);
  }
};
</script>

<style scoped>
.zoomable {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
</style>

3、在你的主组件中使用 ImageZoom.vue

<template>
  <div class="container">
    <ImageZoom
          :src="dogImage"
          alt="Random Dog"
          class="dog-img"
      />
  </div>
</template>

<script>
import ImageZoom from './components/ImageZoom.vue';

export default {
  components: {
    ImageZoom
  },
  data() {
    return {
      dogImage: '',
    };
  },
  mounted() {
    this.fetchRandomDogImage();
  },
  methods: {
    async fetchRandomDogImage(imageNumber) {
      const response = await fetch('https://random.dog/woof.json');
      const data = await response.json();
      this.dogImage= data.url;
    }
  }
};
</script>

<style scoped>

.dog-img {
  max-width: 100%;
  max-height: 400px; /* 限制图片最大高度为400px */
  width: auto;
  height: auto;
  border-radius: 10px; /* 添加圆角样式 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  margin-bottom: 20px;
}

</style>

效果如下：

当我点击图片时会放大，再次点击时又会恢复。注意：放大后的图片实际上在屏幕的正中间。

进阶 - 可选参数

这些选项允许自定义缩放。

财产	类型	默认	描述
margin	number	0	缩放图像外的空间
background	string	"#fff"	叠加层的背景
scrollOffset	number	40	关闭缩放时需要滚动的像素数
container	string	HTMLElement	object
template	string	HTMLTemplateElement	null

 <ImageZoom
      :src="dogImage"
      alt="Random Dog"
      :options="zoomOptions"
    />

  data() {
    return {
      dogImage: '',
      zoomOptions: {
        margin: 200,
        background: '#BADA55',
        scrollOffset: 0
      }
    };
  },

当我设置了下面的参数时，再把图片调小一点，效果如下：