可拖拽的弹窗组件

案例

表格代码如下：

<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Avatar, Badge, Button, Modal, Space } from 'ant-design-vue'
import { createVNode, ref } from 'vue'

import { ResizeDialog, ResizeDialogGroup } from '@mhua/table';

const state = ref({
  test1: false,
  test2: false,
  test3: false
})

function handleConfirm() {
  console.log(9999)
}

function beforeClose(done: () => void) {
  Modal.confirm({
    content: '是否关闭弹窗',
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      done()
    },
    onCancel() {
    },
  });
}
</script>

<template>
  <div>
    <ResizeDialogGroup v-model="state">
      <ResizeDialog unique-key="test1" title="标题111" :is-cancel-btn="false" @confirm="handleConfirm">
        <div>1111111111111</div>
        <template #footer>
          <Button>测试</Button>
        </template>
      </ResizeDialog>
      <ResizeDialog unique-key="test2" title="标题222" :is-confirm-btn="false" :before-close="beforeClose"
        @confirm="handleConfirm">
        <div>1111111111111</div>
      </ResizeDialog>
      <ResizeDialog unique-key="test3" title="标题333" :footer="null">
        <div>1111111111111</div>
      </ResizeDialog>
      <template #list="data">
        <Badge :count="data.filter(item => item.domVisible)?.length">
          <Avatar shape="square" size="large" />
        </Badge>
      </template>
    </ResizeDialogGroup>
    <br>
    <Space>
      <Button type="primary" @click="state.test1 = true">测试1</Button>
      <Button type="primary" @click="state.test2 = true">测试2</Button>
      <Button type="primary" @click="state.test3 = true">测试3</Button>
    </Space>
  </div>
</template>