32 lines
750 B
Vue
32 lines
750 B
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const visible1 = ref(false)
|
|
const visible2 = ref(false)
|
|
const dragHandle = ref<HTMLElement | null>(null)
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 默认 header 拖拽 -->
|
|
<AModal v-model:visible="visible1" :draggable="true">
|
|
<template #title>
|
|
Header 拖拽示例
|
|
</template>
|
|
<p>这是 header 拖拽</p>
|
|
</AModal>
|
|
<AButton @click="visible1 = true">
|
|
打开 Header 拖拽
|
|
</AButton>
|
|
|
|
<AModal v-model:visible="visible2" :draggable="true" draggable-selector=".drag-area">
|
|
<div class="drag-area" style="padding:10px; background:#ffdede; cursor:move">
|
|
拖拽这里
|
|
</div>
|
|
<p>Modal 内容</p>
|
|
</AModal>
|
|
|
|
<AButton @click="visible2 = true">
|
|
打开 Ref 拖拽
|
|
</AButton>
|
|
</template>
|