近期记录、

记录常用的一些方法

1、使用js创建标签：

  const downloadImg = (url) => {
    let derivedNode = document.querySelector("#downloadImg");
    if (derivedNode) {
      document.body.removeChild(derivedNode);
    }
    const hideDiv = document.createElement("a");
    hideDiv.setAttribute("id", "downloadImg");
    document.body.appendChild(hideDiv);
    hideDiv.style.display = "none";
    const event = new MouseEvent("click");
    hideDiv.download = "授权书.png";
    hideDiv.href = url; 
    console.log(url,'url');
    hideDiv.dispatchEvent(event);
  };

---

2、antd4的select滚动条样式修改（rc-virtual-list-holder设置overflow-y:auto）

.rc-virtual-list-scrollbar-thumb {
  background-color: rgb(12, 242, 235) !important;
} 
.rc-virtual-list-holder::-webkit-scrollbar-thumb {
  background-color: rgba(18, 194, 252, 0.82) !important;
}

.rc-virtual-list-holder {
  overflow-y: auto !important;
}
.rc-virtual-list-holder::-webkit-scrollbar-track {
  background-color: rgba(41, 187, 255, 0.3) !important;
} 

---

3、react中个性化modal

 import React from 'react'
import ReactDOM from 'react-dom'

class NewPortal extends React.Component {
  constructor(props) {
    super(props) 
  }

  render() {
    const { children } = this.props
    return ReactDOM.createPortal(children, document.body)
  }
}
export default NewPortal

// 使用
    <NewPortal>
      {visible && (
        <div className={styles.modalBox}>
          <div
            className={classNames(
              styles.modal,
              type == 'small' && styles.bigModal
            )}
          >
            <div className={styles['modal-title']}>{title}</div>
            <div className={styles['modal-content']}>{children}</div>
            <img
              src='/dataScreen/image/common/modalClose.png'
              alt=''
              onClick={() => {
                onClose()
              }}
              className={styles['modal-operator']}
            />
          </div>
        </div>
      )}
    </NewPortal>

---