最近正在開發(fā)自己開源的通用爬蟲的前端界面熄诡，用的是ant-design-pro進行的二次開發(fā)，遇到的坑還是很多的，因此接下來分享的內(nèi)容大多都是和ant-design有關(guān)的，經(jīng)驗都來自于自己的填坑之旅商蕴。本篇我們來講講怎么實現(xiàn)Modal組件的全屏功能。
我們希望實現(xiàn)一下功能
- 用戶能夠通過全屏控制圖標進行全屏及非全屏操作
- 支持初始全屏彈窗芝发，支持隱藏全屏控制圖標
尋找圖標嵌入點
按照慣例绪商，全屏控制圖標都是放置在彈窗的頭部區(qū)域，靠近關(guān)閉按鈕附近辅鲸。在瀏覽過官方組件使用文檔之后格郁，大致發(fā)現(xiàn)有兩個地方可以實現(xiàn)此功能。
- closeIcon
此屬性可以實現(xiàn)自定義關(guān)閉圖標独悴，我們在此處可以插入兩個圖標例书，一個用于關(guān)閉，一個用來控制全屏操作刻炒，同時防止全屏操作觸發(fā)關(guān)閉指令决采，我們應(yīng)該在后者的點擊事件中阻止事件的冒泡。 - title
此屬性用來展示標題內(nèi)容坟奥。我們注意到它不僅支持字符串树瞭，也支持ReactNode類型的數(shù)據(jù)暂幼，因此我們可以在此處實現(xiàn)自定義圖標，并通過樣式控制懸浮到頭部右側(cè)移迫。
嵌入控制圖標
此處我們選擇title屬性來實現(xiàn)旺嬉，通過增加一個中間層在用戶傳入的title中添加一個全屏控制彈窗
const { title } = this.props;
return (
<>
{title}
<button
type="button"
className="ant-modal-close"
style={{ right: 42 }}
>
<span className="ant-modal-close-x">
<Icon className="ant-modal-close-icon" type="arrows-alt" />
</span>
</button>
</>
);
上述代碼中的全屏控制按鈕copy自彈窗中的關(guān)閉按鈕，唯一的不同就是圖標的位置及圖標類型厨埋。我們將上述代碼封裝成一個函數(shù)邪媳，將其執(zhí)行結(jié)果賦予modal的title屬性。
實現(xiàn)效果如下：
實現(xiàn)全屏控制功能
上述我們提到要實現(xiàn)用戶能夠自由控制全屏及退出全屏的功能荡陷。因此我們定義一個名為fullScreen的state屬性來控制當前的彈窗狀態(tài)雨效。
// 切換當前全屏狀態(tài)
toggleFullScreen = () => {
const { fullScreen } = this.state;
this.setState({
fullScreen: !fullScreen,
});
};
titleRender = () => {
const { title } = this.props;
const { fullScreen } = this.state;
return (
<>
{title}
<button
type="button"
className="ant-modal-close"
style={{ right: 42 }}
onClick={this.toggleFullScreen}
>
<span className="ant-modal-close-x">
<Icon className="ant-modal-close-icon" type={fullScreen ? 'shrink' : 'arrows-alt'} />
</span>
</button>
</>
);
};
同時我們希望通過css來控制全屏的樣式，因此我們需要通過上述fullScreen來給予modal不同的樣式名废赞。
const { fullScreen } = this.state;
render() {
<Modal
wrapClassName={`${fullScreen ? 'modal-wrap-fullscreen' : ''}`}
title={this.titleRender()}
{...rest}
/>
}
上述代碼我們通過modal-wrap-fullscreen來控制全屏的時候的樣式徽龟，這邊需要css控制的樣式主要有：
- 控制
modal高度為瀏覽器可視區(qū)域高度，這邊可以通過100vh來實現(xiàn)唉地，寬度為100%即可 - 控制
modal的body高度為瀏覽器可視區(qū)域高度 - 頭部區(qū)域高度 - 底部區(qū)域高度据悔。這邊如果需要實現(xiàn)無底部區(qū)域等情況，還可以繼續(xù)細分賦予Modal不同的wrapClassName來控制 - 可以將邊角由圓角改成直角
其它控制參數(shù)
- 默認全屏功能
要實現(xiàn)默認全屏功能耘沼，那么用戶得傳入一個參數(shù)表明默認全屏极颓。此處我們同樣在props增加一個參數(shù)名為fullScreen的參數(shù)，并且state中的初始值由props中的參數(shù)決定即可群嗤。 - 隱藏控制圖標
同樣我們增加一個名為maxmin的屬性來控制
titleRender = () => {
const { title, maxmin } = this.props;
const { fullScreen } = this.state;
return (
<>
{title}
{maxmin && (
<button
type="button"
className="ant-modal-close"
style={{ right: 42 }}
onClick={this.toggleFullScreen}
>
<span className="ant-modal-close-x">
<Icon className="ant-modal-close-icon" type={fullScreen ? 'shrink' : 'arrows-alt'} />
</span>
</button>
)}
</>
);
};
結(jié)語
上述代碼只是為了說明實現(xiàn)思路作為參考菠隆，可能并不完整。詳細可以查看我托管的代碼狂秘，當然我封裝的代碼中實現(xiàn)的功能會更多一點骇径，具體可以看這。
