35 lines
852 B
Vue
35 lines
852 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>
|
|
|
|
<!-- ref 拖拽 -->
|
|
<AModal v-model:visible="visible2" :draggable="true" :draggable-ref="dragHandle">
|
|
<template #title>
|
|
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>
|