近期记录、

记录常用的一些方法

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、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>


你可能感兴趣的:(javascript,react.js,前端)