自定义化antd的Modal组件并适配PC端部分分辨率

摘要

 　　近期在做页面的优化，需要对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- 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 {
     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 {
     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 {
     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 {
   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 {
     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单位来设置。好了，这就是个人近期的部分学习，分享给大家，如果有什么说得不对的地方，请指教。