Modal does not implement commonly used necessary functions

[Dylan-lijl]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

1.Use a property to control whether the mod can be resized

• In different browsers and operating systems, content layout may be disrupted, and users can solve this problem by adjusting the width and height, thereby enhancing the user experience
• Implementation logic: When the adjustable size property is enabled, when the mouse moves to the edge of the modal, it turns into an arrow. Press and hold it to zoom, and when it moves to the corner, it can be zoomed as a whole, just like the file manager in Windows

2.Use attributes to control whether to minimize, maximize, and full screen

When multiple mods appear, I hope to miniaturize them and keep them at the edge of the container for future recovery and switching

3.Use an attribute to control whether dragging is allowed(the most important)

When turned on, hovering the mouse over the title bar becomes a draggable icon, and when moved, it changes the overall position of the mod because sometimes the mod may block the content of the page below, and the components in the mod have input controls that are inconvenient to view the blocked content

Why do we need official implementation instead of user implementation

Because these features are integrated in other UI frameworks, switching from other UI frameworks to the current framework lacks these features, resulting in poor portability; When users implement it themselves, they inevitably have to listen to DOM specific attributes or classes to select and operate, losing the open close principle. At the same time, bugs and performance losses may occur during implementation, but these features can ensure optimal performance and stability for developers

What does the proposed API look like?

• Use resize to control whether scaling is possible
• Use min, max, and full to control minimizing, maximizing, and full screen respectively
• Use the H5 standard draggable to control whether it can be dragged or not

[Dylan-lijl]

``This is a component that implements the functions of movement and scaling

<template>
    <div class="draggable-modal-layout">
      <Modal
        v-bind="$attrs"
        v-model:open="visible"
        @afterClose="onAfterClose"
        :wrapClassName="modalClassName + ' modal-layout-wrapper'"
        :style="[modalComputedStyle, $attrs.style]"
        :centered="false"
      >
        <slot />
        <template v-for="(slotFn, name) in $slots" :key="name" v-slot:[name]>
          <slot :name="name" />
        </template>
      </Modal>
    </div>
  </template>
  
  <script>
  import { Modal } from 'ant-design-vue'
  import observer from '@/util/ModalResizeObserver'
  
  function generateModalClass() {
    return `modal-${Math.random().toString(36).slice(2, 10)}`
  }
  
  export default {
    name: 'ModalPlus',
    inheritAttrs: false,
    components: { Modal },
    props: {
      open: { type: Boolean, required: true },
      draggable: { type: Boolean, default: true },
      resizable: { type: Boolean, default: false },
    },
    emits: ['update:open', 'afterClose', 'resize', 'moving', 'moveStart', 'moveOver'],
    data() {
      return {
        visible: this.open,
        initialized: false,
        posX: 0,
        posY: 0,
        lastX: 0,
        lastY: 0,
        modalClassName: generateModalClass(),
        contentEl: null,
        originalStyle: null,
      }
    },
    computed: {
      isCentered() {
        return this.$attrs.centered !== false
      },
      modalComputedStyle() {
        return {
          top: this.posY + 'px',
          left: this.posX + 'px',
        }
      },
    },
    watch: {
      open(newVal) {
        this.visible = newVal
      },
      visible(newVal) {
        this.$emit('update:open', newVal)
        if (newVal && this.draggable) {
          this.setupModalBehavior()
        }
      },
    },
    methods: {
      onAfterClose() {
        this.$emit('afterClose')
        this.detachDragHandler()
        this.stopResizeObserver()
      },
  
      setupModalBehavior() {
        this.$nextTick(() => {
          const modal = this.getModalEl()
          const header = this.getModalHeaderEl()
          const content = this.getModalContentEl()
          if (!modal || !header || !content) return
  
          // 初始居中（仅一次）
          if (!this.initialized && this.isCentered) {
            this.posY = (window.innerHeight - modal.offsetHeight) / 2
            this.lastY = this.posY
            this.initialized = true
          }
  
          // 拖拽逻辑
          if (this.draggable) {
            header.style.cursor = 'move'
            this.attachDragHandler(header)
          }
  
          // 缩放逻辑
          this.updateResizeObserver(content)
        })
      },
  
      attachDragHandler(header) {
        header.onmousedown = (e) => {
          const startX = e.clientX
          const startY = e.clientY
          const originX = this.lastX
          const originY = this.lastY
  
          this.$emit('moveStart', this.modalComputedStyle)
  
          const onMouseMove = (e) => {
            this.posX = originX + (e.clientX - startX)
            this.posY = originY + (e.clientY - startY)
            this.$emit('moving', this.modalComputedStyle)
          }
  
          const onMouseUp = () => {
            this.lastX = this.posX
            this.lastY = this.posY
            this.$emit('moveOver', this.modalComputedStyle)
            document.removeEventListener('mousemove', onMouseMove)
            document.removeEventListener('mouseup', onMouseUp)
          }
  
          document.addEventListener('mousemove', onMouseMove)
          document.addEventListener('mouseup', onMouseUp)
        }
      },
  
      detachDragHandler() {
        const header = this.getModalHeaderEl()
        if (header) header.onmousedown = null
      },
  
      updateResizeObserver(content) {
        const style = content.style
  
        // 还原旧内容元素的监听
        if (this.contentEl) {
          observer.unobserve(this.contentEl)
          Object.assign(style, this.originalStyle || {})
        }
  
        // 保存原始样式
        if (!this.originalStyle) {
          this.originalStyle = {
            resize: style.resize,
            overflow: style.overflow,
          }
        }
  
        if (this.resizable) {
          style.resize = 'both'
          style.overflow = ['visible', 'unset', ''].includes(style.overflow) ? 'auto' : style.overflow
  
          this.contentEl = content
          observer.observe(content, (entry) => this.$emit('resize', entry))
        }
      },
  
      stopResizeObserver() {
        if (this.contentEl) {
          observer.unobserve(this.contentEl)
          this.contentEl = null
        }
      },
  
      getModalEl() {
        return document.querySelector(`.${this.modalClassName} .ant-modal`)
      },
      getModalHeaderEl() {
        return this.getModalEl()?.querySelector('.ant-modal-header')
      },
      getModalContentEl() {
        return this.getModalEl()?.querySelector('.ant-modal-content')
      },
    },
    mounted() {
      if (this.visible) {
        this.setupModalBehavior()
      }
    },
    beforeUnmount() {
      this.detachDragHandler()
      this.stopResizeObserver()
    },
  }
  </script>
  
  <style lang="less">
  .modal-layout-wrapper {
    .ant-modal-content {
      padding: 2px !important;
  
      .ant-modal-header {
        padding: 18px 22px 8px 22px;
      }
  
      .ant-modal-body {
        padding: 0 22px 18px 22px;
      }
    }
  }
  </style>

ModalResizeObserver.js

// ModalResizeObserver.js
import ResizeObserverPolyfill from "resize-observer-polyfill";

const CompatibleResizeObserver =
  window.ResizeObserver || ResizeObserverPolyfill;

export class ModalResizeObserver {
  #observer;
  #targets;
  constructor() {
    this.observer = new CompatibleResizeObserver(this.handleResize.bind(this));
    this.targets = new Map();
  }

  handleResize(entries) {
    for (const entry of entries) {
      const callback = this.targets.get(entry.target);
      if (typeof callback === "function") {
        callback(entry);
      }
    }
  }

  /**
   * 注册一个 DOM 元素监听
   * @param {HTMLElement} el 要观察的元素
   * @param {Function} callback 尺寸变化回调函数
   */
  observe(el, callback) {
    if (!el || typeof callback !== "function") return;
    this.targets.set(el, callback);
    this.observer.observe(el);
  }

  /**
   * 注销监听
   * @param {HTMLElement} el 要取消观察的元素
   */
  unobserve(el) {
    if (!el) return;
    this.targets.delete(el);
    this.observer.unobserve(el);
  }

  /**
   * 销毁所有监听
   */
  disconnect() {
    this.targets.clear();
    this.observer.disconnect();
  }
}

export default new ModalResizeObserver();

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days