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

最新推荐文章于 2024-09-10 15:52:22 发布

showwaychen

最新推荐文章于 2024-09-10 15:52:22 发布

阅读量570

点赞数

文章标签：前端 javascript 开发语言

原文链接：https://tr.zhiyakeji.com/post/1674455352464

版权

本文介绍了如何在Nuxt3应用中使用medium-zoom库来实现图片点击后放大的功能。通过npm或yarn安装库，然后在onMounted生命周期钩子中调用mediumZoom方法，可以选择性地对具有特定属性或ID的img标签添加放大效果。

摘要由CSDN通过智能技术生成

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>