【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面

server/2024/11/15 5:59:14/

可以增加自定义方法v-transfer-dom

   <div v-transfer-dom="true"><Popup v-model="showPopup"><PopupHeader :title="policyloan.docJson.title" /><div class="noticeText"><p v-for="(item, index) in policyloan.docJson.contents" :key="index" :class="item.class">{{ item.content }}</p></div><PopupFooter:class="policyloan.countdown ? 'popupFooterDisabled' : ''"@onConfirm="onConfirm()">{{ policyloan.countdown ? `已阅读(${policyloan.countdown})` : '已阅读' }}</PopupFooter></Popup></div>import TransferDom from '@/transfer-dom'

transfer-dom’.js

const objectAssign = require('object-assign')
/*** Get target DOM Node* @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean* @return {Node} The target that the el will be appended to*/
function getTarget (node) {if (node === void 0) {return document.body}if (typeof node === 'string' && node.indexOf('?') === 0) {return document.body} else if (typeof node === 'string' && node.indexOf('?') > 0) {node = node.split('?')[0]}if (node === 'body' || node === true) {return document.body}return node instanceof window.Node ? node : document.querySelector(node)
}function getShouldUpdate (node) {// do not updated by defaultif (!node) {return false}if (typeof node === 'string' && node.indexOf('?') > 0) {try {const config = JSON.parse(node.split('?')[1])return config.autoUpdate || false} catch (e) {return false}}return false
}const directive = {inserted (el, { value }, vnode) {el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'const parentNode = el.parentNodevar home = document.createComment('')var hasMovedOut = falseif (value !== false) {parentNode.replaceChild(home, el) // moving out, el is no longer in the documentgetTarget(value).appendChild(el) // moving into new placehasMovedOut = true}if (!el.__transferDomData) {el.__transferDomData = {parentNode: parentNode,home: home,target: getTarget(value),hasMovedOut: hasMovedOut}}},componentUpdated (el, { value }) {const shouldUpdate = getShouldUpdate(value)if (!shouldUpdate) {return}// need to make sure children are done updating (vs. `update`)var ref$1 = el.__transferDomData// homes.get(el)var parentNode = ref$1.parentNodevar home = ref$1.homevar hasMovedOut = ref$1.hasMovedOut // recall where home isif (!hasMovedOut && value) {// remove from document and leave placeholderparentNode.replaceChild(home, el)// append to targetgetTarget(value).appendChild(el)el.__transferDomData = objectAssign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) })} else if (hasMovedOut && value === false) {// previously moved, coming back homeparentNode.replaceChild(el, home)el.__transferDomData = objectAssign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) })} else if (value) {// already moved, going somewhere elsegetTarget(value).appendChild(el)}},unbind: function unbind (el, binding) {el.className = el.className.replace('v-transfer-dom', '')if (el.__transferDomData && el.__transferDomData.hasMovedOut === true) {el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)}el.__transferDomData = null}
}export default directive

// Thanks to: https://github.com/calebroseland/vue-dom-portal


http://www.ppmy.cn/server/18272.html

相关文章

人脸识别开发项目汇总

1.基于FaceX-Zoo实现的人脸识别系统-CSDN博客 2.人脸识别&#xff1a;京东开源FaceX-Zoo&#xff1a;PyTorch工具箱 - 知乎 (zhihu.com) 3.人头识别-人群中准确快速的检测头部算法_在输入图像中检测人像头部的方法-CSDN博客 4.Github开源人脸识别项目face_recognition - 知乎…

SpringBoot:SpringMVC(下)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、RequestBody补充二、PathVariable三.RequestPart:四.ResponseBody五.CookieValue&#xff0c;SessionAttribute&#xff0c;RequestHeader 前言 提示&…

贪心(贪婪)算法

主要思想 贪心算法的思想主要可以概括为“总是做出当前看起来最优的选择”&#xff0c;也就是不从整体上进行考虑&#xff0c;所得到的答案是某种意义上的局部最优解&#xff0c;不一定是整体最优解。 贪心算法没有固定算法框架&#xff0c;算法设计的关键是贪心策略的选择。…

HarmonyOS开发:【基于命令行(开发环境)】

准备开发环境 在嵌入式开发中&#xff0c;很多开发者习惯于使用Windows进行代码的编辑&#xff0c;比如使用Windows的Visual Studio Code进行OpenHarmony代码的开发。但当前阶段&#xff0c;大部分的开发板源码还不支持在Windows环境下进行编译&#xff0c;如Hi3861、Hi3516系…

Linux——网络管理nmcli

nmcli 不能独立使用&#xff0c;需要对应的服务启动 1. NetworkManager.service 2. 网络配置和服务不相关 3. 通过 nmcl &#xff49; 建立网络配置和网卡之前的映射关系 网卡 简称&#xff1a;nmcli d DEVICE &#xff1a;物理设备 TYPE: 物理设备类型 ethernet 以太网…

动态内存管理 柔性数组

文章目录 动态内存函数 malloc freecallocrealloc 重新开辟空间realloc 也可以第一个参数为NULL&#xff0c;则是直接开辟内存&#xff0c;类似于malloc用法 常见的动态内存错误对空指针进行解引用操作对开辟的内存越界访问对非动态开辟的内存使用free释放使用free释放动态开辟…

Mysql基础篇

1 数据库的三大范式 第一范式&#xff1a;强调的是列的原子性&#xff0c;即数据库表的每一列都是不可分割的原子数据项。 第二范式&#xff1a;在第一范式的基础上&#xff0c;消除非主属性对主属性的部分函数依赖。要求实体的非主键完全依赖于主键。所谓完全依赖是指不能存…

macos vscode 激活虚拟环境

用 source activate activate的路径报错 解决&#xff1a;cd到activate下的文件下 直接source activate 解决 (base) dearrdearrdeMacBook-Air 时序作业 % /Applications/文件/派森/时序作业/.venv/bin/activat zsh: no such file or directory: /Applications/文件/派森/时…