nuxt3中使用medium-zoom来实现图片点击放大功能

medium-zoom是一个模仿medium网站中的图片点击放大效果的开源库，源码在github仓库。使用简单，扩展性也强。

安装

npm install medium-zoom
# or
yarn add medium-zoom

使用示例

使用时，可以有针对性的对某此img标签添加放大的效果。

1. 对所有的img都有效。

<script setup>
import mediumZoom from 'medium-zoom'
onMounted(async () => {
    await nextTick()
    mediumZoom(document.querySelectorAll('img'))
})
</script>

2. 对带指定属性的才生效。

<template>
    <img src="/1/pic1.jpg" data-zoomable=""/>
</template>
<script setup>
import mediumZoom from 'medium-zoom'
onMounted(async () => {
    await nextTick()
    mediumZoom('[data-zoomable]')
})
</script>

这样就只有带有data-zoomable=""属性的img标签才会放大。

3. 对某个id的img标签才生效。

<template>
    <img src="/1/pic1.jpg" id="zoomtest"/>
</template>
<script setup>
import mediumZoom from 'medium-zoom'
onMounted(async () => {
    await nextTick()
    mediumZoom(document.querySelectorAll('#zoomtest'))
})
</script>

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中使用medium-zoom来实现图片点击放大功能