文字放大镜

组件 文字 放大镜

组件

<template>
    <!-- @mouseout="box=false"  -->
    <span class="box" @mousemove="box = true" @mouseout="box=false">
        <p class="p" @mousedown="asd($event)">
            <span @mousemove="as(i,index)" v-for="(i,index) in text" :key="index">{{i}}</span>
        </p>
        <!-- overflow: hidden; -->
        <div id="q" 
            v-show="box">
            {{texts}}
        </div>
    </span>
</template>
<script>
    export default {
        props: ['text'],
        data() {
            return {
                box: false,
                texts: ''
            }
        },
        methods: {
            as(val, index) {
                // console.log(val,index)
                let a = ''
                if (this.$props.text[index - 1]) {
                    a += this.$props.text[index - 1]    
                }
                if (this.$props.text[index]) {
                    a += this.$props.text[index]
                }
                if (this.$props.text[index + 1]) {
                    a += this.$props.text[index + 1]
                }
                if (this.$props.text[index + 2]) {
                    a += this.$props.text[index + 2]
                }
                this.texts = a
                console.log(index)


                let divs = document.querySelector('#q')  //获取圈元素
                let boxp = document.querySelector('.p') //获取放大三倍的元素
                this.box = true
                document.onmousemove = e => {  
                     //鼠标位置
                //     // 让放大镜跟着鼠标位置
                    
                //     var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
                //     var scroll_left = document.documentElement.scrollLeft || document.body.scrollLeft;
                //    conole.log(scroll_top)
                //     // divs.style.left = e.clientX - 50 +'px'
                //     // divs.style.top = e.clientY - 50 +'px'
                //     targetX  = e.clientY + scroll_top + 'px';
                //     targetY = e.clientX + scroll_left + 'px';
                //     setInterval(function () {
                //         leaderX = leaderX + (targetX - leaderX) / 10;
                //         leaderY = leaderY + (targetY - leaderY) / 10;
                        divs.style.left = 10 + "px";
                        divs.style.top = 163 + "px";
                        console.log(divs.style.top)
                //     }, 10)
                }
            },
            asd(e) {
                let divs = document.querySelector('#q')  //获取圈元素
                let boxp = document.querySelector('.p') //获取放大三倍的元素
                this.box = true

            }
        },
        mounted() {
            let boxp = document.querySelector('.p') //获取放大三倍的元素
            let divss = document.querySelector('#a') //获取放大三倍的元素
        },
    }
</script>sss
<style scoped>
    .p {
        margin: 0;

    }

    .p span {
        padding: 0
    }

    #q {
        border-radius: 50%;
        border: 1px solid #eee;
        box-shadow: 0 0 6px rgb(163, 161, 161);
        font-size: 28px;
        pointer-events: none;
        line-height: 100px;
        text-align: center;
        width:100px;
        height:100px;
        position: fixed;
        z-index:9999;
        background:#fff;
        color: black;
        /* left:0px;
        top:0px; */
    }

    .box p {

        user-select: none;
        white-space: nowrap;

    }
</style>

通过引入


还有全网页放大镜 在本地