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

这篇具有很好参考价值的文章主要介绍了【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 default
  if (!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.parentNode
    var home = document.createComment('')
    var hasMovedOut = false

    if (value !== false) {
      parentNode.replaceChild(home, el) // moving out, el is no longer in the document
      getTarget(value).appendChild(el) // moving into new place
      hasMovedOut = 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.parentNode
    var home = ref$1.home
    var hasMovedOut = ref$1.hasMovedOut // recall where home is

    if (!hasMovedOut && value) {
      // remove from document and leave placeholder
      parentNode.replaceChild(home, el)
      // append to target
      getTarget(value).appendChild(el)
      el.__transferDomData = objectAssign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) })
    } else if (hasMovedOut && value === false) {
      // previously moved, coming back home
      parentNode.replaceChild(el, home)
      el.__transferDomData = objectAssign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) })
    } else if (value) {
      // already moved, going somewhere else
      getTarget(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文章来源地址https://www.toymoban.com/news/detail-861300.html

到了这里,关于【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp组件库Popup 弹出层 的使用方法

    目录 #平台差异说明 #基本使用 #设置弹出层的方向 #设置弹出层的圆角 #控制弹窗的宽度 | 高度 #内容局部滚动 #API #Props #Event 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 #平台差异说明 App H5 微信小

    2024年01月21日
    浏览(73)
  • 微信小程序——使用 Vant 组件实现 Popup 弹出层(各位置弹出详细代码分享)

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——使

    2024年02月08日
    浏览(75)
  • [uni-app]uni-popup组件弹出异常的解决方案

    调用弹窗的事件和弹窗自定义样式: 注意,这个时候第二行代码中点击触发showBagDetail函数的盒子的父元素与uni-popup组件是同级的,也就是比uni-popup低一级 uni-popup中自定义元素块的样式: 调用弹窗弹出方法的函数: 效果: 可以看到只弹出来了一个小白边,这个小白边还是

    2024年02月11日
    浏览(74)
  • # vue3 vant4 Tabbar 标签栏组件的封装 和Popup弹出层的封装

    需求如上,标签栏里第三个是图片,整个项目有两种场景, 标签栏正常跳转页面, 标签拦渲染别的图片时候,点击就是打开弹出层, 封装了标签栏,弹出层两部分,作为公共组件 标签栏的封装 徽标样式需要调整,list现在是自己暂时再state里写的假数据 下面是再使用标签组

    2024年01月20日
    浏览(80)
  • 【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup,其中包含图片和名称

    在微信小程序中,你可以使用weui组件库来实现弹出一个确认的popup,并在其中包含图片和名称。以下是一个示例代码: 在wxml文件中,添加一个按钮来触发弹出确认popup: 在wxss文件中,定义确认popup的样式: 在js文件中,编写相应的逻辑来显示和隐藏确认popup,并传递图片和名

    2024年02月17日
    浏览(70)
  • selenium-弹出框、下拉框

            对js使用的alert、confirm 以及 prompt定位也是项目中常见的,比如弹出提 示框“确定”等。要定位这类提示框具体思路是switch_to_alert()方法定位 alert/confirm/prompt,然后使用text/accept/dismiss/send_keys这一系列动作。 driver.switch_to.alert.accept()         #点击ok driver.switch_t

    2024年02月02日
    浏览(61)
  • jQuery实现简单弹出框

    1、点击“更多”出现弹出框 2、点击下拉列表触发回调 3、点击空白区域收起弹出框 PS:鼠标右键效果图`另存为`到本地 ,再将图片后缀gif改为rar即可得到完整代码压缩包。 1、提前声明弹出标识做判断; 2、通过jQuery的has()、is()或其他类似方法判断点击的是弹出层以外的空白

    2024年02月11日
    浏览(47)
  • 【微信小程序 uniapp】 ws-wx-privacy 微信隐私保护弹出框 隐私协议弹出框

    插件地址 (https://mp.weixin.qq.com/wxamp/basicprofile/index?token=1956320193lang=zh_CN) 4. 将调试基础库改为 3.0.0以上。 微信开发者工具-详情-本地设置-调试基础库 5. 页面 使用示例 仅有在指引中 声明所处理的用户信息 ,才可以调用平台提供的对应接口或组件。若未声明,对应接口或组件将

    2024年02月08日
    浏览(56)
  • 点击空白处弹出框取消

    新建click-outside.js文件 全局使用在main.js中引入,我这里是在assets/js文件中,引入时按照自己的路径引入 页面使用,在弹框元素上添加v-clickoutside=\\\"事件名\\\"  在methods中写相应的逻辑

    2024年02月08日
    浏览(43)
  • 微信小程序实现气泡弹出框

    这个组件可以实现 引用别人的组件,上面github可以很好的实现气泡弹窗效果 show:function(){ //如果show值为true,则更改为false 反之设置true if(this.data.show){ this.setData({ show:false }) }else{ this.setData({ show:true }) } }, he(){ console.log(“sadasdd”) this.setData({ show:!this.show }) wx.navigateTo({ url: ‘/p

    2024年02月09日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包