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

ops/2024/10/18 22:30:19/

可以增加自定义方法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/ops/17622.html

相关文章

Linux多进程(二)进程通信方式三 共享内存

共享内存提供了一个在多个进程间共享数据的方式&#xff0c;它们可以直接访问同一块内存区域&#xff0c;因此比使用管道或消息队列等通信机制更高效。在多进程程序中&#xff0c;共享内存通常与信号量一起使用&#xff0c;以确保对共享内存的访问是线程安全的。 一、打开/创建…

生成式AI在B端产品的应用分析

AI产品发展到现在&#xff0c;消费端的产品应用还受到比较大的限制&#xff1b;但是在B端&#xff0c;已经有了不错的表现。作者总结了AI产品在B端的几款应用&#xff0c;一起来看看表现如何。 生成式AI在B端产品的应用分析© 由 ZAKER 提供 随着今年生成式AI应用的大范围…

设计模式:开放-封闭原则(Open-Closed Principle,OCP)介绍

开放-封闭原则&#xff08;Open-Closed Principle&#xff0c;OCP&#xff09;是面向对象设计原则之一&#xff0c;它指导我们编写可扩展和易维护的代码。该原则的核心思想是&#xff1a; 软件实体&#xff08;类、模块、函数等&#xff09;应该对扩展开放&#xff0c;对修改封…

安卓Dagger框架:依赖注入实践与应用

摘要 Dagger是适用于Android和Java生态系统的强大依赖注入(Dependency Injection, DI)工具&#xff0c;以其编译时生成代码和高效的运行时性能而著称。本文旨在深入探讨Dagger的核心概念、工作流程、优缺点以及实际代码示例&#xff0c;以便开发者更好地理解并有效利用这一框架…

python学习笔记B-08:序列结构之列表--列表的遍历操作

列表的遍历操作主要通过以下三种方法实现。 lst list("hello") print("第一种遍历方式&#xff0c;使用for循环&#xff0c;循环变量item直接就是lst中的元素") for item in lst:print(item,end"\t")print("\n\n第二种遍历方式&#xff0…

c++ 智能指针 交换函数实验

1.概要 c 智能指针 交换函数实验 交换后&#xff0c;两个指针管理的目标对象会发生交换 sh_ptr1.swap(sh_ptr2); 2.代码 #include <iostream> using namespace std;int main() {shared_ptr<int> sh_ptr1 std::make_shared<int>(5);shared_ptr<int>…

vue实现水平排列且水平居中

样式实现 .body{text-align: center; } .body_content{display: inline-block; } .body_content_cardList{display: flex;flex-wrap: wrap;text-align: center; }<div class"body"><div class"body_content"><div class"body_content…

Reactjs常用组件

1 react 1.1 useState 让函数组件具有维持状态的能力 const[count, setCount]useState(0); 1.2 useEffect 执行副作用&#xff0c;useEffect 的第二个参数告诉 React 用到了哪些外部变量 类似于Vue watch的作用 useEffect(fn, deps); 1.每次 render 后执行&#xff1a;不…