当前位置: 首页 > article >正文

【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

http://www.kler.cn/a/158225.html

相关文章:

  • 【力扣】54. 螺旋矩阵
  • 华为ospf和isis双点双向路由重分布的次优路径和环路终极解决方案
  • 搜维尔科技:AI时代,迈向2030元宇宙数字人戏曲教育数字化思维、战略与未来!
  • CMD批量添加防火墙端口
  • APB Introduction
  • word、excel文件转PDF(documents4j方式,简单)
  • 深度学习推理(Inference)
  • React全站框架Next.js使用入门
  • Sass 同时导出JavaScript 和 CSS变量
  • 微信小程序基础
  • Shopify二次开发之三:liquid语法学习(Tags)
  • 15.(vue3.x+vite)组件间通信方式之默认插槽(匿名插槽)
  • 有文件实体的后门无文件实体的后门rootkit后门
  • 营销互动类小游戏策划与开发
  • 查询绑定了所有id的name
  • 【电机控制】PMSM无感foc控制(五)相电流检测及重构 — 单电阻采样
  • Redis AOF源码解析
  • 2024年天津财经大学珠江学院专升本专业课考试《经济学》考试大纲
  • ftp的服务安装配置
  • 15:00的面试,15:06就出来了,问的问题过于变态了。。。