Vue3 a-draw 弹窗可自定义拖拽大小

### 实现 Vue3 A-Draw 组件弹窗的自定义拖拽调整大小功能 为了实现在 Vue3 中 `a-draw` 组件上的自定义拖拽和调整大小的功能，可以借鉴 `vue-draggable-resizable` 的使用方法[^1]。以下是具体实现方式： #### 安装依赖库 首先，在项目中安装所需的依赖包： ```bash npm install vue-draggable-resizable@next ``` #### 导入并注册组件 在项目的入口文件（通常是 `main.js` 或者 `main.ts`），导入并全局注册该组件及其样式： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // Import the Draggable Resizable Component and its CSS file. import Vdr from 'vue-draggable-resizable'; import 'vue-draggable-resizable/dist/VueDraggableResizable.css'; const app = createApp(App); app.component('vdr', Vdr); // Register globally as <vdr> app.mount('#app'); ``` #### 创建可拖拽对话框组件 创建一个新的组件用于表示具有拖拽特性的模态窗口，比如命名为 `ADrawDialog.vue`。 ```html <template> <div class="dialog-container"> <!-- Dialog Header --> <header @mousedown="startDragging">Title</header> <!-- Content Area --> <section ref="contentArea"></section> <!-- Drag Handle for resizing --> <footer><span class="resize-handle" /></footer> <!-- Wrap with draggable resizable component --> <vdr :w="width" :h="height" :parent="true" :active.sync="isActive" @dragging="updatePosition" @resizing="updateSize"> <slot></slot> <!-- Insert content here --> </vdr> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; let isActive = ref(false), width = ref(400), height = ref(300); function startDragging(event: MouseEvent){ // Implement drag logic... } function updatePosition(newRect: any){ console.log(`New position X:${newRect.left}, Y:${newRect.top}`); } function updateSize(widthValue: number, heightValue: number){ width.value = widthValue; height.value = heightValue; } </script> <style scoped> /* Add styles to make it look like a modal */ .dialog-container { /* ... */ } .resize-handle{ cursor: se-resize; /* Change mouse pointer when hovering over resize handle */ } </style> ``` 此代码片段展示了如何通过组合 `<vdr>` 和其他 HTML 元素来构建一个既支持拖拽又允许改变尺寸的对话框[^2]。 #### 使用新组件 最后一步是在页面上实例化这个新的对话框组件，并传递必要的属性给它以便于控制其行为。 ```html <!-- Example usage within another template --> <a-button type="primary" @click="visible=true">Open Custom Draw Dialog</a-button> <a-drawer title="Custom Drawer Title" placement="right" v-model:visible="visible"> <ADrawDialog /> </a-drawer> ``` 上述过程描述了怎样利用现有的插件资源以及一些简单的逻辑处理完成目标需求。需要注意的是实际开发过程中可能还需要根据具体的业务场景做适当修改优化[^3]。