u

code/base-project/base-vue/src/App.vue

@@ -1,50 +1,34 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 
-const AModal1Visible = ref(false)
-const AModal2Visible = ref(false)
-const AModal3Visible = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+const dragHandle = ref<HTMLElement | null>(null)
 </script>
 
 <template>
-  <button @click="AModal1Visible = true">
-    打开第 1 个 AModal
-  </button>
-
-  <!-- 第 1 个 AModal -->
-  <AModal v-model:visible="AModal1Visible" mask-closable >
+  <!-- 默认 header 拖拽 -->
+  <AModal v-model:visible="visible1" :draggable="true">
     <template #title>
-      第 1 个 AModal
+      Header 拖拽示例
     </template>
-    <p>这是第 1 个弹窗内容</p>
+    <p>这是 header 拖拽</p>
   </AModal>
+  <AButton @click="visible1 = true">
+    打开 Header 拖拽
+  </AButton>
 
-  <!-- 第 2 个 AModal -->
-  <AModal v-model:visible="AModal2Visible" mask-closable>
+  <!-- ref 拖拽 -->
+  <AModal v-model:visible="visible2" :draggable="true" :draggable-ref="dragHandle">
     <template #title>
-      第 2 个 AModal
-    </template>
-    <p>这是第 2 个弹窗内容</p>
-    <template #footer>
-      <button @click="AModal3Visible = true">
-        打开第 3 个 AModal
-      </button>
-      <button @click="AModal2Visible = false">
-        关闭
-      </button>
-    </template>
-  </AModal>
-
-  <!-- 第 3 个 AModal -->
-  <AModal v-model:visible="AModal3Visible" mask-closable position="top">
-    <template #title>
-      第 3 个 AModal
-    </template>
-    <p>这是第 3 个弹窗内容</p>
-    <template #footer>
-      <button @click="AModal3Visible = false">
-        关闭
-      </button>
+      Ref 拖拽示例
     </template>
+    <div ref="dragHandle" style="padding:10px; background:#ffdede; cursor:move;">
+      拖拽这个区域 (ref)
+    </div>
+    <p>Modal 内容</p>
   </AModal>
+  <AButton @click="visible2 = true">
+    打开 Ref 拖拽
+  </AButton>
 </template>