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

news2024/10/5 14:12:39

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

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>