使用vue-drag-resize做拖拽功能，放大缩小后，如何使vue-drag-resize跟着放大缩小？

  • Z时代
  • 2024-03-08
  • 分类：IT

需求，页面上有一个矩形，需要可以拖拽移动，且放大缩小，拖拽功能想到了使用组件vue-drag-resize，将放大缩小（不是改变矩形的大小）使用的css属性transform: scale()，但是通过css放大缩小矩形后，发现vue-drag-resize并没有跟着放大缩小，举行线条还是初始化的小大状态，该如何解决？

代码如下：

<template>
    <div class="content-body">
        <div class="slider">
            <el-slider v-model="scale" height="150px" :max="2.0" :step="0.1" :min="0.1"></el-slider>
        </div>
        <div class="content-inner-body">
            <vue-drag-resize
                style="position: absolute;"
                :parentScaleX='scale'
                :parentScaleY='scale'
                class="drag-item"
                :isActive="true"
                :w="sizeObj.width"
                :h="sizeObj.height"
                :z="3"
                :isDraggable='true'
                :isResizable="false"
                :preventActiveBehavior='true'
                v-on:dragging="onDragging"
            >
                <div class="lines-wrapper" :style="[{transform: `scale(${scale})`}, {width: `${sizeObj.width}`, height: `${sizeObj.height}`}]">
                </div>
            </vue-drag-resize>
        </div>
    </div>
</template>
<script>
export default {
    computed: {
    },
    mounted() {
    },
    data() {
        return {
            scale: 1,
            sizeObj: {
                x: 0,
                y: 0,
                width: 600,
                height: 400
            }
        }
    },
    methods: {
        onDragging(newRect) {
            this.sizeObj.x = newRect.top;
            this.sizeObj.y = newRect.left;
            this.sizeObj.width = newRect.width;
            this.sizeObj.height = newRect.height;
        },
    },
}
</script>
<style lang="scss" scoped>
.content-body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba($color: #000000, $alpha: 0.1);
    .slider{
        position: absolute;
        bottom: 10px;
        right: 30px;
        width: 150px;
    }
    .content-inner-body{
        position: absolute; 
        background: rgba($color: #000000, $alpha: 0.3);
        overflow: hidden; 
        top: 30px; 
        right: 30px; 
        bottom: 30px; 
        left: 30px;
        padding: 20px;
        box-sizing: border-box;
        .lines-wrapper{
            position: relative; 
            transform-origin: left top;
            width: 100%;
            height: 100%;
            background: #fff;
        }
    }
}
</style>

效果如下图：

使用vue-drag-resize做拖拽功能，放大缩小后，如何使vue-drag-resize跟着放大缩小？

回答：

<el-slider v-model="scale" @change="resizeDragItem"></el-slider>
...
methods: {
    resizeDragItem() {
        this.sizeObj.width *= this.scale;
        this.sizeObj.height *= this.scale;
    },
    ...
}

以上是 使用vue-drag-resize做拖拽功能，放大缩小后，如何使vue-drag-resize跟着放大缩小？ 的全部内容， 来源链接： utcz.com/p/934585.html

回到顶部