可拖动弹窗

注意：

全屏弹窗禁止拖动，即：draggable 属性在全屏模式下无效。

单个弹窗

<template>
    <button @click="open">打开</button>

    <TinyLayer v-model="visible" title="按住我拖动弹窗" draggable>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

多个弹窗

<template>
    <button @click="openA">弹窗 A</button>
    <button @click="openB">弹窗 B</button>
    <button @click="openC">弹窗 C</button>
    <button @click="openD">弹窗 D</button>

    <TinyLayer 
        v-model="visibleA" 
        title="弹窗 A（按住拖动）" 
        :mask-visible="false" 
        draggable
    ></TinyLayer>
    <TinyLayer 
        v-model="visibleB" 
        title="弹窗 B（按住拖动）" 
        :mask-visible="false" 
        draggable
    ></TinyLayer>
    <TinyLayer 
        v-model="visibleC" 
        title="弹窗 C（按住拖动）" 
        :mask-visible="false" 
        draggable
    ></TinyLayer>
    <TinyLayer 
        v-model="visibleD" 
        title="弹窗 D（按住拖动）" 
        :mask-visible="false" 
        draggable
    ></TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

    const visibleA = ref( false );
    const visibleB = ref( false );
    const visibleC = ref( false );
    const visibleD = ref( false );

    const openA = () => {
        visibleA.value = true;
    }
    const openB = () => {
        visibleB.value = true;
    }
    const openC = () => {
        visibleC.value = true;
    }
    const openD = () => {
        visibleD.value = true;
    }
</script>

监听事件

提示：

组件对于拖动功能提供了两个监听事件：

1. 拖动中：@dragging，包含两个参数，分别代表弹窗左上角的横 / 纵坐标；
2. 拖动结束：@drag-end，包含两个参数，分别代表弹窗左上角的横 / 纵坐标。

<template>
    <button @click="open">打开</button>

    <TinyLayer 
        v-model="visible" 
        title="按住我拖动弹窗" 
        draggable
        @dragging="dragging"
        @drag-end=dragend
    >
        <div>x: {{ position.x }}<br>y: {{ position.y }}</div>
    </TinyLayer>
</template>

<script setup>
    import { ref, reactive } from "vue";

    const visible = ref( false );
    const position = reactive( {
        x: "",
        y: ""
    } );
    const open = () => {
        position.x = "";
        position.y = "";
        visible.value = true;
    }
    const dragging = ( x, y ) => {
        position.x = x;
        position.y = y;
    }
    const dragend = () => {
        alert( "拖动结束" );
    }
</script>