标签：vue 放大镜 refs height var 淘宝 imgs main left

使用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>

标签：vue,放大镜,refs,height,var,淘宝,imgs,main,left
来源： https://blog.csdn.net/qq_51050856/article/details/116675847

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。