使用vue做仿作淘宝商品展示放大镜

效果图

文件地址
提取码：s2yj
css代码：

    <style>
        #myApp {
            text-align: center;
        }
        
        #main {
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        #main img {
            width: 100%;
            height: 100%;
        }
        
        #cover {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 247, 4, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            /* 让遮罩层偏移自身一般, 以中心点为坐标0, 0的位置 */
            transform: translate(-100px, -100px);
        }
        
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul li {
            float: left;
            margin: 5px;
        }
        
        ul li img {
            width: 50px;
            height: 50px;
        }
        
        .active {
            border: 1px solid red;
        }
        
        main {
            position: relative;
        }
        
        #big {
            width: 400px;
            height: 400px;
            position: absolute;
            border: 1px solid red;
            left: 300px;
            top: 0;
            overflow: hidden;
        }
        
        #big img {
            width: 700px;
            height: 700px;
            position: absolute;
        }
    </style>

body 代码

  <!-- vue模板 -->
    <div id='myApp'>
        <div>
            <show :imgs="imgs"></show>
            <thumbnail :imgs="imgs"></thumbnail>
        </div>

    </div>


    <!-- 底部缩略图 组件-->
    <template id='thumbnail'>
            <ul>
                 <li v-for="item,i in imgs" :key="item">
                    <img :class="current == item ? 'active': ''" :src="item" @mouseover="over(item)" @myevent="current">
                </li>
            </ul>
    </template>
    <!-- 大图放大镜 组件 -->
    <template id='show'>        
         <div>
            <div id="main" ref="main" @mousemove="move" @mouseenter="()=>{bigShow=true}"
                @mouseleave='()=>{bigShow=false}'>
                <img :src="current" alt="">
                <div id="cover" ref="cover" :style="{left: X+'px', top: Y+'px'}" v-show="bigShow"></div>
            </div>

            <!-- 蒙版 -->
            <div id="big" v-show="bigShow">
                <img :src="current" alt="" :style="bigStyle">
            </div>

         </div>
    </template>

js代码

<script>
        var bus = new Vue()
            // 组件缩略图
        Vue.component('thumbnail', {
                template: '#thumbnail',
                props: ["imgs"],
                data() {
                    return {
                        current: "",
                    }
                },
                methods: {
                    over(name) {
                        this.current = name
                    }
                },
                watch: {
                    current(newvalue) {
                        bus.$emit("myevent", newvalue)
                        console.log(newvalue, "发送");
                    }
                }
            })
            //展示图，放大镜
        Vue.component('show', {
                template: '#show',
                props: ["imgs"],
                data() {
                    return {
                        // 记录遮罩层的横纵坐标
                        X: 0,
                        Y: 0,
                        // 大图和遮罩层是否显示
                        bigShow: false,
                        current: "imgs/1.gif", //展示图片默认值
                    }
                },
                created() {
                    bus.$on("myevent", (data) => {
                        this.current = data
                    })
                },
                methods: {
                    move(e) {
                        // getBoundingClientRect().left 获取标签在网页上的横坐标
                        var X = e.pageX - this.$refs.main.getBoundingClientRect().left;
                        var Y = e.pageY - this.$refs.main.getBoundingClientRect().top
                        console.log("位置坐标", X, Y);
                        // 在vue提供了一个ref属性,用于在组件对象中快速查找DOM元素
                        // 在原生标签或组件标签上设置ref属性后, 可以在vue对象中通过this.$refs调用
                        // 注意: 
                        // 1, 通过refs对象只能查找当前组件模板中的元素
                        // 2, 通过refs对象不仅可以找到原生dom标签,还可以用于查找子组件标签
                        var mainWith = this.$refs.main.offsetWidth;
                        var coverWidth = this.$refs.cover.offsetWidth;
                        var min = coverWidth / 2;
                        var max = mainWith - coverWidth / 2;
                        // console.log(this.$refs.cover);
                        if (X < min) X = min;
                        if (X > max) X = max;
                        if (Y < min) Y = min;
                        if (Y > max) Y = max;
                        this.X = X;
                        this.Y = Y
                    }
                },
                computed: {
                    bigStyle() {
                        return {
                            left: -3 * this.X + 300 + "px",
                            top: -3 * this.Y + 300 + 'px'
                        }
                    }
                }

            })
            // 根组件
        var vm = new Vue({
            el: '#myApp',
            data: {
                imgs: ['imgs/1.gif', 'imgs/2.gif', 'imgs/3.gif', 'imgs/4.gif', 'imgs/5.gif'],
            }
        })
    </script>