dataScreen/index.vue

<template>
    <div id="mouse">
        <div class="item" v-for="item of modelList"
            :style="'width:' + item.w + 'px;height:' + item.h + 'px; top:' + item.x + 'px;left:' + item.y + '; border: 1px solid #000;'">
            <el-input v-model="item.w" type="number"></el-input>
            <el-input v-model="item.h" type="number"></el-input>


        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
            modelList: [
            ],
            showx: 0,
            showy: 0,
            showwidth: 0,
            showheight: 0,
            input: ''
        }
    },
    created() {

    },
    mounted() {
        this.queryDom()
    },
    methods: {
        // 监听鼠标点击事件
        queryDom() {
            document.addEventListener('click', this.querydata)
        },
        querydata(event) {
            if (this.modelList.length === 0) {
                this.modelList.push({
                    x: 0,
                    y: 0,
                    w: event.clientX > 0 && event.clientX > 1920 ? 1920 : event.clientX,
                    h: event.clientX > 0 && event.clientY > 1080 ? 1080 : event.clientY,
                })
            } else {
                this.modelList.map(item => {
                    if (item.w !== event.clientX && item.w !== event.clientY) {
                        this.modelList.push({
                            x: 0,
                            y: 0,
                            w: event.clientX > 0 && event.clientX > 1920 ? 1920 : event.clientX,
                            h: event.clientX > 0 && event.clientY > 1080 ? 1080 : event.clientY,
                        })
                    }
                })

            }
        }
    },


}
</script>
<style lang="scss">
html {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
<style scoped lang="scss">
#screen {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    position: relative;

    .item {
        position: absolute;
        width: 0px;
        height: 0px;
        top: 0px;
        left: 0px;
    }

}
</style>