关于javascript:Vue3拖拽缩放组件支持吸附对齐实时参考线等

近用 Vue3 写了个用于拖拽调整地位和大小的的组件，同时反对 冲突检测，元素吸附对齐，实时参考线 等个性。

首先 git 地址：Vue3DraggableResizable

个性

• 自定义缩放句柄（缩放时共有八个方位可操作，可别离定义开启或敞开）**
• 限度组件的拖动和缩放在其父节点内 **
• 自定义组件内各种类名 **
• 缩放句柄的类名也可自定义 **
• 元素吸附对齐 **
• 实时参考线 **
• 自定义参考线 **
• 应用 Vue3 和 ts**

该组件有几十种参数和事件，可进行各种配置，具体可查看 Github 的具体文档，这里只说一下简略的应用形式和个性。

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer>
        <Vue3DraggableResizable>
          Test
        </Vue3DraggableResizable>
        <Vue3DraggableResizable>
          Another test
        </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>
<script>
import {defineComponent} from 'vue'
import {DraggableContainer},Vue3DraggableResizable  from 'vue3-draggable-resizable'
// 引入默认款式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({components: { Vue3DraggableResizable, DraggableContainer}
})
</script>
<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}

</style>

如上方，简略的引入组件即可，需注意，默认导出的 Vue3DraggableResizable 组件就是拖拽缩放组件，可独自应用也可和 DraggableContainer 联合应用，DraggableContainer 是另一个容器组件，该组件提供了主动吸附以及参考线等个性的反对，如果你不须要主动吸附的话，间接独自应用 Vue3DraggableResizable 组件即可，具体 props 和 events 可查看 git 文档。

如果该组件对你有用的话，在 git 上帮我点个 star 是最好的了，如果你在应用过程中有什么问题的话，也欢送在 issues 上发问，我会尽快恢复或解决的。