摘要
近期在做页面的优化，需要对antd的Modal组件模块进行精细的调优，简单地说就是给Modal二次美妆，提升用户的体验感。在此分享一下自己在实际逻辑代码中对美化Modal的理解，并用简单生动的demo来展示学习成果。
运行项目
安装所需要的node环境以及安装antd库
技术依赖
demo中简单的运用了hooks、以及本文需要讲述的antd的Modal组件的应用技术。
JS部分
js的逻辑代码较为简单，放置了一个可以打开弹窗的button。对于Modal组件，我们这次使用了它一个叫‘wrapClassName’的API，就是说给组件加上一层特殊的类名，这样在整个页面中A弹窗与B弹窗就可以区分开来。具体代码如下：
import React, { useState } from 'react' import classnames from 'classnames' import { Modal } from 'antd' import './App.less' const App = ({ }) => { const [visible, setVisible] = useState(false); const handleOpen = () => { setVisible(true); } const handleClose = () => { setVisible(false); } const title = ( <> <div className='cus-title'> <img src={require('./images/banner-no-star.svg')} alt="" /> <span>Customize Modal</span> </div> </> ) const footer = ( <div className='cus-footer-btn'> <button onClick={handleClose}>确认下单</button> <button onClick={handleClose}>取消下单</button> </div> ) return ( <div className='cus-modal-demo'> <Modal centered={true} closable={false} visible={visible} title={title} footer={footer} wrapClassName={classnames({ 'cus-modal-wrapper': true, })} > <div className='cus-otaku-menu'> <div className='menu-title'> <h1>宅男究极菜单</h1> </div> <div className="menu-food"> <span>可乐</span> </div> <div className="menu-food"> <span>薯片</span> </div> <div className="menu-food"> <span>干脆面</span> </div> <div className="menu-food"> <span>达利园小面包</span> </div> </div> </Modal> <button onClick={handleOpen} className='menu-btn'>Open Modal</button> </div> ); } export default App; // 你好！沙雕程序员。。。 // 00000000000000000000000000000000000000000000*-----------*0000000000000000000000000000000000000----------*-*000000000000000000000000000 // 0000000000000000000000000000000000000000000000000000**----0000000000000000000000000000000000*----*000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000--*000000000000000000000000000000000--*000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000*-*000000000000000000000000000000000**0000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000**---*0000000000000000000000000000000000000000000000*----*00000000000000000000000000000000000000 // 0000000000000000000000000000000000000-------000000000000000000000000000000000000000000000--------0000000000000000000000000000000000000 // 00000000000000000000000000000000000000-----00000000000000000000000000000000000000000000000------00000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*00000000000 // 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*00000000000 // 0000000000000000000000000000*000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*00000000000 // 0000000000000000000000000000*000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*00000000000 // 00000000000000000000000000000*00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000-00000000000 // 00000000000000000000000000000*000*0000**00000000000000000000000000000000000000000000000000000000000000000000000*000000000**00000000000 // 000000000000000000000000000000*00000000***00000000000000000000000000000000000000000000000000000000000000000000*000000000*-000000000000 // 000000000000000000000000000000**00000000*-*000000000000000000000000000000000000000000000000000000000000000000**000000000--000000000000 // 00000000000000000000000000000000*00000000*--*00000000000000000000000000000000000000000000000000000000000000*-*000000000*-0000000000000 // 00000000000000000000000000000000**00000000*--*00000000000000000000000000000000000000000000000000000000000*-*0000000000*-00000000000000 // 00000000000000000000000000000000**0000000000*--**000000000000000000000000000000000000000000000000000000*--*000000*000-**00000000000000 // 0000000000000000000000000000000000000000000000*---*000000000000000000000000000000000000000000000000**---000000000000*-0000000000000000 // 00000000000000000000000000000000000**00000000000**----*00000000000000000000000000000000000000000**---*000000000000*-*00000000000000000 // 0000000000000000000000000000000000000*00000000000000*----***0000000000000000000000000000000***----*00000000000000*-*000000000000000000 // 0000000000000000000000000000000000000***0000000000000000*---------****0000000000000***--------*0000000000000000*--*0000000000000000000 // 0000000000000000000000**0000000000000000***000000000000000000***------------------------**000000000000000000**-**000000000000000000000 // 00000000000000000000*--*000--000000000000***00000000000000000000000000*********0*00000000000000000000000000*-**00000000000000000000000 // 00000000000000000000--*000--*000000000000000--*000000000000000000000000000000000000000000000000000000000*--**0000000000000000000000000 // 0000000000000000000* -0000*-000000000000000*---**00000000000000000000000000000000000000000000000000000*0* -000000000000000000000000000 // 0000000000000000000* -0000*-000000000000000--00000***0000000000000000000000000000000000000000000000000000--*00000000000000000000000000 // 00000000000000000000--0000--0000000000000--*0000000000*****00000000000000000000000000000000*******0000000---00000000000000000000000000 // 00000000000000000000--0000* -0000000000*--0000*0000000000000******00000000000000000000*******0000000000000--00000000000000000000000000 // 00000000000000000000- 00000- 00000000*--*000** -000000000000000000*******************0*0000000000000000000--00000000000000000000000000 // 000000000000000000000--0000- 000000*--*000*-----*0000000000000000000000000000000000000000000000000000000000 -0000000000000000000000000 // 000000000000000000000*--*000--000*-*0000--*0000-*0000000000000000000000000000000000000000000000000000000000--0000000000000000000000000 // 00000000000000000000000-*0000*0*--000*---000000--0000000000000000000000000000000000000000000000000000000000--*000000000000000000000000 // 000000000000000000000000000000--000---000000000-*00000000000000000000000000000000000000000000000000000000000--000000000000000000000000 // 000000000000000000000000000*--*00--*00000000000- 00000000000000000000000000000000000000000000000000000000000--000000000000000000000000 // 000000000*---------------- -*0----------------- -------------------------------*******--------------------- ------------------------ // 0000000*--00000000000000- --- *0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000- - // 00000*--000000000000000- ---000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000--*0 // 000*--000000000--000000--0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000---000 // 0*--000000000000-*000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*--00000 // --00000000000000*-00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000--*000000 // 000000000000000*--0**--0*--0000000000000000000-000******--000**--*00*-*00*000000000*--*****000000000*0000000000000000000000--*0000000- // 000000000000000000000* -*0000000000000000000000000-***000-00000-000*--*-*0*00000000*-000000000000000 00000000000000000000*--0000000*-- // 000000000000000000000*-*000000000000000000000-*00--**--*---000--*0*-000--*--00--***0***** -000000000 0000000000000000000--*0000000--00 // 00000000000000000000000000000000000000000000000000**0****0*000*-*0*-***000*-00*-000000000-*000000000-*000000000000000*--*0000000*---00 // 0000000000000000000000000000000000000000000000-000-0*0*0--000*--0000**0****000*-**0***0*--*0000000000000000000000000---0000000*--- -00 // 000000000000000000000000000000000000000000000--000-*****--00*00*000*******-0000000000*0000*000000000*0000000000000*--00000000--000--00 // 000000000000000000000000000000000000000000000-0000*0000*--00000-000-***-0--00*-000-000-000-0000000000000000000000--*0000000---000* -00 // 000000000000000000000000000000000000000000000000000000000000000*000-****0**00*000000000000000000000000000000000- -0000000* -00000* -00 // 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*--0000000*---000000- -00
咦！皮一下不会被打吧，啊哈哈哈哈哈。。。。。
CSS部分
css代码主要是书写适配以及内容样式等，在适配页面分辨率部分个人是使用的vw、vh单位，大大的优化了业务代码。具体的css代码如下：
.cus-modal-demo { min-width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #6c8a68; background-image: url('./images/黑色菜单.jpg'); background-repeat: no-repeat; background-position: center; .menu-btn { width: 5vw; height: 5vw; padding: 0.8vw; background-color: #b25357; font-size: 1vw; font-weight: bold; color: #bc9955; filter: drop-shadow(2px 4px 6px #5c7db5); cursor: pointer; &:active, &:focus, &:hover { filter: drop-shadow(2px 4px 6px #bc8662); color: #784f6d; } } } // 弹窗样式 .cus-modal-wrapper { overflow: hidden; .ant-modal-content { width: 30vw; height: 29vw; background-image: url('./images/咖啡.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; box-shadow: none; margin: 0 auto; & > div { border: 0; text-align: center; } .ant-modal-header { height: 6vw; background: none; .ant-modal-title { height: 100%; display: flex; justify-content: center; align-items: center; } } .ant-modal-body { height: 20vw; padding: 2.5vw 3.1vw 0vw 3.3vw; display: flex; justify-content: center; } .ant-modal-footer { height: 3vw; display: flex; justify-content: center; align-items: center; } } } // title-style .cus-title { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; & > img { width: 16vw; position: relative; top: -2vw; left: 0vw; } & > span { position: absolute; top: 3.5vw; font-size: 2vw; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bold; color: white; } } // body-style .cus-otaku-menu { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; .menu-title { height: 2.7vw; display: flex; justify-content: center; align-items: center; & > h1 { margin: 0 auto; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 400; } } .menu-food { height: 3vw; display: flex; justify-content: center; align-items: center; padding-top: 0.3vw; & > span { font-size: 1.5vw; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bold; color: #567474; } } } // footer-style .cus-footer-btn { height: 100%; display: flex; justify-content: center; align-items: center; & > button { width: auto; height: 2.5vw; border-radius: 1.5vw; font-size: 1vw; font-weight: 400; background: #b5701c; border: solid; filter: drop-shadow(2px 4px 6px #8c4b10); } }
demo效果
总结
最后，简单总结一下，当需要对Modal弹窗组件进行二次修改时，我们可以调用它自身的API来修改它。在wrapClassName（对话框外层容器的类名）中设置唯一的类名，css业务逻辑代码就不会污染全局的弹窗样式。css代码布局很简单，但是如果需要使得布局在不同的分辨率下进行缩放，pc端的大部分分辨率都可以使用vw、vh单位来设置。好了，这就是个人近期的部分学习，分享给大家，如果有什么说得不对的地方，请指教。