原貼 輕松搞定Ant Design Modal對話框拖拽縮放 - ByteZoneX社區https://www.bytezonex.com/archives/IFRuoJhd.html

Ant Design 模態對話框：實現拖拽縮放功能

**子
Ant Design 是一個流行的前端 UI 框架，提供了一系列實用的組件，包括模態對話框。雖然默認情況下 Ant Design 的模態對話框不支持拖拽縮放，但我們可以通過?resize?屬性輕松實現這一功能。

要使用?resize?屬性，我們需要在 React 項目中安裝?antd?庫：

npm install antd

然后，在我們的代碼中引入?antd：

import { Modal } from 'antd';

在?Modal?組件中添加?style={{ resize: 'both' }}?屬性：

<Modaltitle="Basic Modal"visible={visible}onOk={handleOk}onCancel={handleCancel}style={{ resize: 'both' }}
><p>Some contents...</p>
</Modal>

通過設置?resize?屬性為?'both'，我們告訴瀏覽器允許用戶調整對話框的寬度和高度。現在，當你點擊按鈕打開對話框時，你可以拖動它的邊框來改變大小。

**子
除了使用?resize?屬性，我們還可以使用 JavaScript 代碼實現拖拽縮放功能：

const modal = document.getElementById('modal');const resizeHandler = (e) => {const width = e.clientX - modal.offsetLeft;const height = e.clientY - modal.offsetTop;modal.style.width = `${width}px`;modal.style.height = `${height}px`;
};modal.addEventListener('mousedown', (e) => {if (e.target.className === 'modal-header') {window.addEventListener('mousemove', resizeHandler);}
});window.addEventListener('mouseup', () => {window.removeEventListener('mousemove', resizeHandler);
});

我們首先獲取對話框元素的引用，然后定義一個處理函數?resizeHandler，用于調整對話框的大小。接著，我們為對話框元素添加?mousedown?事件監聽器，當用戶按下鼠標左鍵時觸發。如果用戶點擊的是對話框標題欄，我們為?window?對象添加?mousemove?事件監聽器，在鼠標移動時觸發。最后，我們在?mouseup?事件監聽器中移除?mousemove?事件監聽器。現在，當用戶點擊對話框標題欄并拖動鼠標時，對話框的大小就會隨之改變。

**子
實現拖拽縮放功能的兩種方法各有優缺點。使用?resize?屬性更簡單、更直接，但對某些瀏覽器（如 Safari）的支持可能不夠好。使用 JavaScript 代碼更靈活，但需要更多的代碼和調試。選擇合適的方法取決于你的具體項目需求和瀏覽器支持要求。

結論

通過使用?resize?屬性或 JavaScript 代碼，我們可以輕松地實現 Ant Design 模態對話框的拖拽縮放功能。這將增強用戶的交互體驗，讓你的對話框更具可定制性和實用性。

常見問題解答

1. resize 屬性僅適用于特定的瀏覽器嗎？
是的，resize?屬性可能對某些瀏覽器（如 Safari）支持不夠好。

2. 如何在對話框處于全屏模式時禁用拖拽縮放？
如果你不希望在對話框全屏模式下允許拖拽縮放，可以使用以下 JavaScript 代碼：

document.documentElement.style.overflow = 'hidden';

3. 是否可以設置最小和最大對話框大小？
是的，可以使用以下 CSS 樣式：

#modal {min-width: 300px;max-width: 600px;
}

4. 拖拽縮放是否適用于模態對話框中的嵌套組件？
是的，拖拽縮放也適用于嵌套組件。

5. 如何通過代碼編程方式調整對話框大小？
可以使用以下 JavaScript 代碼：

modal.style.width = '600px';
modal.style.height = '400px';