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上提問，我會盡快恢復或解決的。