一度記録すると、コンポーネントのドラッグとズームの機能が実現します

1. 最初にインストールします

npm i vue3-draggable-resizable --save

2. main.js でのグローバルインポート

「vue3-draggable-resizable」から Vue3DraggableResizable をインポートします。

import "vue3-draggable-resizable/dist/vue3DraggableResizable.css";

3. ローカルで使用する必要がある場合は、スタイル ファイルをコンポーネントに個別にインポートします。

「vue3-draggable-resizable」から Vue3DraggableResizable をインポートします。

import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";

4. 使用 (ズームとドラッグの実装に使用できるイベント)

@activated="print('アクティブ')"      

@deactivated="print('停止')"      

@drag-start="print('ドラッグスタート')"      

@resize-start="print('サイズ変更開始')"      

@dragging="print('dragging')"      

@resizing="print('サイズ変更')"      

@drag-end="print('ドラッグエンド')"      

@resize-end="print('リサイズ終了')"

5. ページ上の特定のアプリケーション

 <Vue3DraggableResizable    

:draggable="store.state.draggable.isDraggable" //ドラッグしてストアに書き込むことができるかどうかを制御します

:x="draggableData.clientX" //これらのパラメータはデータベースから取得されます

:y="ドラッグ可能なデータ.clientY"    

:initH="ドラッグ可能なデータ.initHeight"    

:initW="ドラッグ可能なデータ.initWidth"    

:w="ドラッグ可能なデータ.initWidth"    

:h="ドラッグ可能なデータ.initHeight"    

@resize-end="resizeEndHandle"    

@drag-end="dragEndHandler"    

v-show="alarmInfos.length > 0" >

        任意の要素を内部に配置できます

</Vue3DraggableResizable>