vuejs单页面html实现在线拖拽拉伸矩形框功能

最新推荐文章于 2024-07-12 13:47:08 发布

空中湖

最新推荐文章于 2024-07-12 13:47:08 发布

阅读量664

点赞数

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/kongzhonghu/article/details/126578156

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

使用vuejs单页面html实现在线拖拽拉伸矩形框功能，矩形框可拖拽，可拉伸。

具体效果如下：

主要代码：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
</head>
<body>
<div id="appDiv">
    <vue-drag-resize v-for="rect in rects" :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize" style="background-color: yellow">
    </vue-drag-resize>
</div>

<script>
    var app = new Vue({
        el: '#appDiv',
        data: {
            rects: [],
            width: 0,
            height: 0,
            top: 0,
            left: 0
        },
        created: function () {
            var device = {};
            this.rects.push(device);
        },
        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    });
</script>
</body>
</html>

在线演示地址 vuejs单页面html实现在线拖拽拉伸矩形框功能响应式bootstrap模板 (mubanmao.top)