nuxt3中使用medium-zoom来实现图片点击放大功能
medium-zoom是一个模仿medium网站中的图片点击放大效果的开源库，源码在github仓库。使用简单，扩展性也强。
安装
npm install medium-zoom
# or
yarn add medium-zoom
使用示例
使用时，可以有针对性的对某此img标签添加放大的效果。
- 对所有的img都有效。
<script setup>
import mediumZoom from 'medium-zoom'
onMounted(async () => {
await nextTick()
mediumZoom(document.querySelectorAll('img'))
})
</script>
- 对带指定属性的才生效。
<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标签才会放大。
- 对某个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来实现图片点击放大功能
