本文主要是介绍【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
可以增加自定义方法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
这篇关于【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
