【taro react】 ---- 常用自定义 React Hooks 的实现【五】之显示模态对话框

1. 模态对话框的使用场景

  1. Taro.showModal(Object object) 内容只能传字符串,比较单一,面对表单或者内容的样式不同时,不能处理;
  2. 使用 Taro.showModal 时,在H5页面,页面如果出现层级较高元素时,由于 Taro.showModal 有一个动画过程,就会出现低层级先遮掩,高层级后遮掩的情况。

2. 解决问题

  1. 自定义一个【模态对话框】的组件,但是面对的问题是,需要使用一个变量控制,当页面遮罩层多时,控制变量增多,会比较麻烦;
  2. 在【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层基础上,再封装一个 useSelfModal 的 hook。

3. showModal 定义

  1. 定义默认参数的值 defaultProps;
  2. 使用 Object.assign 合并传入的 opts 和 defaultProps;
  3. 使用 useMask 的 show 传入构建的 content 结构!
  const showModal = function(opts){
    let defaultProps = {
      position: 'center', 
      opacity: 0.4,
      zIndex: 1026,
      title: null,
      co

你可能感兴趣的:(Taro,React,入门到实战系列,taro,react.js,前端)