vue中使用vab-magnifier实现放大镜效果

效果图如下：
在这里插入图片描述

1. 首先，使用npm或yarn安装vab-magnifier插件：

npm install vab-magnifier

或

yarn add vab-magnifier

2. 在Vue组件中引入vab-magnifier插件：

import VabMagnifier from 'vab-magnifier';
import 'vab-magnifier/lib/vab-magnifier.css'export default {components: {VabMagnifier},
}

3. 在模板中使用vab-magnifier组件：

<template><div><el-card><div class="out-box"><div class="item" v-for="item in imgSrc" :key="item"><vab-magnifier type="circle" :url="item" style="width:100%;height:260px;" :width="150"></vab-magnifier></div></div></el-card></div>
</template>

其中，url是需要放大的图片的路径

4.数据存放

export default {data() {return {imgSrc: [require("../../assets/person.jpg"),require("../../assets/person2.webp"),],}}},
}

所有代码如下：

<template><div><el-card><div class="out-box"><div class="item" v-for="item in imgSrc" :key="item"><vab-magnifier type="circle" :url="item" style="width:100%;height:260px;" :width="150"></vab-magnifier></div></div></el-card></div>
</template><script>
import VabMagnifier from 'vab-magnifier';
import 'vab-magnifier/lib/vab-magnifier.css'export default {components: {VabMagnifier},data() {return {imgSrc: [require("../../assets/person.jpg"),require("../../assets/person2.webp"),],}}
}
</script><style lang="less" scoped>
::v-deep .el-card {.out-box {display: flex;gap: 20px;.item {width: 25%;img {object-fit: cover;aspect-ratio: 1;object-position: center;}}}
}
</style>