Vue3 + Ant Design Vue Modal 对话框拖拽+缩放指令

<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :width="width"
    :zIndex="zIndex"
    :bodyStyle="{ height: height + 'px' }"
    :destroyOnClose="true"
    :wrapClassName="'draggable-dialog ' + (isFullScreen ? 'full-screen' : '')"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #header>
      <div class="dialog-header">
        <span>{{ title }}</span>
        <span class="full-screen-btn" @click="toggleFullScreen">
          <fullscreen-exit-outlined v-if="isFullScreen" />
          <fullscreen-outlined v-else />
        </span>
        <span class="close-btn" @click="handleCancel">
          <close-circle-outlined />
        </span>
      </div>
    </template>
    <div class="dialog-content" v-resize="resizeModal">
      <!-- 内容 -->
    </div>
  </a-modal>
</template>
 
<script setup>
import { ref } from 'vue';
import { FullscreenExitOutlined, FullscreenOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import 'ant-design-vue/es/modal/style';
import draggable from 'vuedraggable';
import { onMounted, reactive } from 'vue';
 
const props = defineProps({
  title: String,
  width: Number,
  zIndex: Number,
  height: Number
});
 
const visible = ref(false);
const isFullScreen = ref(false);
 
const handleOk = () => {
  // 确认操作
};
 
const handleCancel = () => {
  // 取消操作
};
 
const toggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
};
 
const resizeModal = () => {
  // 处理缩放逻辑
};
 
onMounted(() => {
  const draggableModal = new draggable(document.querySelectorAll('.draggable-dialog'), {
    draggable: '.ant-modal-header',
    delay: 100,
    delayOnTouchOnly: true
  });
});
</script>
 
<style scoped>
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.full-screen-btn, .close-btn {
  cursor: pointer;
  margin-right: 8px;
}
 
.full-screen-btn:hover, .close-btn:hover {
  color: #1890ff;
}
 
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
}
 
.draggable-dialog {
  cursor: move;
}
</style>

这个代码实例展示了如何在Vue 3和Ant Design Vue中创建一个可拖拽和可缩放的对话框。它使用了vuedraggable库来实现拖拽功能，并且定义了一个可以在对话框标题栏上放置的拖拽处理程序。同时，它还包含了一个全屏按钮，允许用户在全屏和非全屏之间切换对话框的显示状态。缩放逻辑需要自定义实现，可以通过监听窗口尺寸变化或者使用第三方库来实现。