Vue-drag-resize 拖拽缩放插件的使用(简单示例)

Vue-drag-resize 拖拽缩放插件的使用拖拽缩放插件的使用(简单示例简单示例)

本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的

参考借鉴价值，需要的朋友可以参考下

字幕

<div id="lBox" style="background-color: #D7E9F5;"

:style="{'height': parentHeight + 'px', 'width': parentWidth + 'px'}">

<drag-resize v-for="(rect,index) in texts"

@dragging="textResize($event, index)">

<div style="width: 100%; height: 100%;"

:style={backgroundColor:rect.BoxColor,opacity:rect.BoxOpacity}>

</div><!-- 控制背景色及背景透明度 使背景透明度不影响字幕 -->

<div style="width: 100%; height: 100%;">

<p :class="rect.Direction === 'Left to Right' ? 'roll-right' : 'roll-left'"

style="width: 100%; position:absolute; bottom:-0.25em;left:0px"

:style="{color: rect.TextColor,fontFamily: rect.FontFile,

</drag-resize>

logo

<drag-resize v-for="(rect,index) in logos"

:parentLimitation="true"

:w="rect.Width"

:h="rect.Height"

:x="rect.Left"

:y="rect.Top"

@resizing="logoResize($event, index)"

</drag-resize>

</div>

JS

textResize(newRect, index) {

const BoxWidth = newRect.width+''

this.texts[index].BoxWidth = BoxWidth.substring(0, BoxWidth.indexOf("."))

const BoxHeight = newRect.height+''

this.texts[index].BoxHeight = BoxHeight.substring(0, BoxHeight.indexOf("."))

const BoxTop = newRect.top+''

this.logos[index].Width = Width.substring(0, Size.indexOf("."))

const Height = newRect.height+''

this.logos[index].Height = Height .substring(0, Size.indexOf("."))