如何正确的使用Vue-drag-resize插件

这期内容当中小编将会给大家带来有关如何正确的使用Vue-drag-resize插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

字幕

<div id="lBox" 
     :>
     
 <drag-resize v-for="(rect,index) in texts"
       
       :w="rect.BoxWidth"
       :h="rect.BoxHeight"
       :x="rect.BoxLeft"
       :y="rect.BoxTop"
       @resizing="textResize($event, index)" 
       @dragging="textResize($event, index)">
       
 <div 
 :style={backgroundColor:rect.BoxColor,opacity:rect.BoxOpacity}>
 </div><!-- 控制背景色及背景透明度 使背景透明度不影响字幕 -->
    
 <div >
    <p :class="rect.Direction === 'Left to Right' ? 'roll-right' : 'roll-left'"
      
      :style="{color: rect.TextColor,fontFamily: rect.FontFile,
     fontSize: rect.FontSize+'px',
     opacity:rect.FontOpacity,
     animationDuration: rect.Speed + 's'}">
     {{rect.Text}}
    </p>
 </div>
 
 </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)" 
      @dragging="logoResize($event, index)">
       
    <div >
     <img :src="'/logos/' + rect.FileName"
      >
    </div>
    
 </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.texts[index].BoxTop = BoxTop.substring(0, BoxTop.indexOf("."))

  const BoxLeft = newRect.left+''
  this.texts[index].BoxLeft = BoxLeft.substring(0, BoxLeft.indexOf("."))
 }

 logoResize(newRect, index) {
  const Width = newRect.width''
  this.logos[index].Width = Width.substring(0, Size.indexOf("."))
  
  const Height = newRect.height+''
  this.logos[index].Height = Height .substring(0, Size.indexOf("."))
  
  const Top = newRect.top+''
  this.logos[index].Top = Top.substring(0, Top.indexOf("."))

  const Left = newRect.left+''
  this.logos[index].Left = Left.substring(0, Left.indexOf("."))
 }

除此之外还有字幕向左或向右滚动的CSS

 .roll-left {
 animation: wordsLoopLeft 6s linear infinite normal;
 }

 .roll-right {
 animation: wordsLoopRight 6s linear infinite normal;
 }

 @keyframes wordsLoopLeft {
 0% {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
 }
 100% {
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
 }
 }

 @keyframes wordsLoopRight {
 0% {
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
 }
 100% {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
 }
 }

上述就是小编为大家分享的如何正确的使用Vue-drag-resize插件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。