vue3 传送门teleport解决多层弹窗(fixed)嵌套引起的问题

最新推荐文章于 2024-04-07 09:00:00 发布
最新推荐文章于 2024-04-07 09:00:00 发布
阅读量666 收藏
点赞数
分类专栏： # Taro css 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanchengmei/article/details/115197416
版权
小程序 同时被 3 个专栏收录
66 篇文章 1 订阅
订阅专栏
Taro
51 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

前提：项目是taro3，用的是vue语法

场景描述：
组件1：弹窗，用fixed定位
组件2：跟随日历组件，里面引用到组件1

遇到的问题：表单弹窗的定位宽高渲染都是100%，但是日历组件里面的弹窗却是相对表单（红框部分）的100%
图一
图二
解决：在页面的外层定义一个带id的空的view作为定点，弹窗组件中用将弹窗传送到空view中
需要注意的是，这个定点view的id不能直接写成id=‘xxxx’，因为渲染的时候会自动的把id换掉，我是用生成的随机数做id
在这里插入图片描述

Misha韩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3的Teleport：Teleport是Vue3的一个新功能，它允许我们将子组件渲染到父组件以外的地方，这在处理模态框、弹出窗口等情况时非常有用
哎 你看的博客
06-23 1132
I. Teleport 的概述 Teleport 的定义 Teleport 的效用和应用场景 II. Teleport 的基本使用 如何在 Vue3 项目里启用 Teleport 使用 Teleport 渲染子组件至父组件以外的 DOM 位置的例子 Teleport 的基本语法和要素 III. Teleport 在实际应用中的案例 利用 Teleport 创建模态框的例子 显示/隐藏 Teleport 渲染的内容 在 Teleport 中传递数据 IV. Teleport 的优势和特点
html中使用fix定位,css之position: fixed;不相对网页定位
weixin_42524824的博客
06-09 2247
描述position: fixed;决定元素(left，top)相对与页面定位，并且height，width百分比也相对页面。绝对定位元素不会因为父元素的overflow: hidden;而隐藏。嵌套的绝对定位都是相对页面定位了，互相定位之间无关联。然而，在某些情况下绝对定位不再相对于页面定位fixed元素会相对于祖先元素中(从下往上)第一个具有transform属性的节点定位。分析相对trans...
Vue3多个弹窗同时出现解决思路
海风依旧
12-01 5695
Vue3多个弹窗同时出现解决思路：弹窗或者说对话框是我们在开发系统或者页面很常用的元素，所以博主想对出现多个弹窗的情况下的解决思路进行一个整理
vue3使用teleport实现弹窗效果
小白的博客
12-20 669
目录 1、例子：点击出现弹窗 2、样式 3、弹窗遮罩效果如何实现 teleport能够将我们的组件html结构移动到指定位置 1、例子：点击出现弹窗 <button @click="isShow = true">点击出现弹窗</button> <div class="showPart" v-if="isShow"> <teleport to="body"> <div class="part">
vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(二)——二级弹框
weixin_44867717的博客
12-07 1039
弹框
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
在Vue3中，为了提高代码复用性和用户体验，开发者经常需要封装一些全局的、通用的UI组件，例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript...
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
01-19
话不多说，直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种， 一种是监听页面高度（我采用的这种） 一种是监听软键盘事件（ios和安卓实现方式不同，...
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
VUE多层路由嵌套实现代码
08-30
VUE多层路由嵌套实现代码 VUE多层路由嵌套是一种复杂的路由机制，能够满足复杂的应用场景需求。该实现代码主要是通过定义多个模板和路由对象，然后将其组合起来实现多层路由嵌套。 1. 定义模板 首先，我们需要...
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
【Vue3】自定义Modal的fixed无效
最新发布
owo_ovo的博客
04-07 663
【Vue3】自定义Modal的fixed无效
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
易小花的博客
02-22 5841
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题） 由于页面中弹框很多，往往会挡住想要查看的内容。从而，有了自由移动拖拽弹框的需求；但在使用的过程中发现，一开始编写的drag.js文件会移出可视范围，会影响项目的整体布局；并且在拖动过程中发现，快速拖动弹框时，可能会失效或者略微延后。 1.在项目中新建drag.js文件，文件中代码如下（直接复制使用）（以下代码已解决移出可视范围和快速拖动延后问题，并为拖动时设置对应的鼠标样式） import Vue from 'vue'; //使用Vue.direc
简单说一下CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况
蘑菇猎手的专栏
06-01 7787
首先要清楚，position需要top,bottom,left,right来配合实现定位，当然根据实际情况，不必要把四个方向的定位全写出来。 举个例子。 position:absolute; top:10px; bottom:10px; left:10px right:10px 接下来就要分别介绍position属性的不嵌套使用（即该元素中没有子元素使用position），和
fixed定位嵌套导致无法覆盖其他元素
天心天地生的博客
12-16 2208
问题描述 fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>css 定位</title> </head> <body> <style> .root {
vue3 使用teleport报错 找不到‘parentNode‘节点（未解决）
YueMiaoL的博客
06-21 4513
vue3 使用teleport报错 找不到'parentNode'节点（未解决）
vue3teleport传送
jaiofjaiodjfaf的博客
03-14 1459
Teleport是一种能够将我们的模板移动到 DOM 中 Vue app 之外的内置组件 teleport 里的to 指向渲染组件的dom 在哪里显示就通过注册id使用，to和id必须一样 使用场景 例：比如可以注册一个全局的提示信息，这里我封装了一个子组件,子组件里写teleport内置组件，在app.vue里注册id，teleport页面调用子组件。 子组件 <template> <div class='portals'> <button @clic..
Vue3中＜Teleport/＞组件踩坑与异步组件运用
热门推荐
weixin_44647865的博客
12-09 3万+
重点：！这个组件要在你想要传送的DOM加载完成之后才能使用，不然是传送不了的。 ## 官方释义： 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 ## 作用场景：就比如说你想展示一个放大缩小的图片到整个页面上，但是又受到了例如：relative，absolute等定位的影响，运用这个组件或许是一个不错的方法，毕竟是官方提供的。
vue多弹窗解决问题
hmbbpdx的博客
11-11 1893
vue弹窗解决(实习) 希望有更好的方法提出意见 虚心接受
vue3中多层弹窗的嵌套
04-01
在Vue3中实现多层弹窗的嵌套可以通过以下步骤实现： 1.在父组件中定义一个状态变量来控制弹窗的显示与隐藏。 2.在父组件中通过v-if指令来控制弹窗的显示与隐藏，同时通过v-bind指令将状态变量传递给子组件。 3.在子组件中定义一个状态变量来控制弹窗的显示与隐藏，同时通过props接收父组件传递的状态变量。 4.在子组件中通过v-if指令来控制弹窗的显示与隐藏，同时通过v-bind指令将状态变量传递给子组件的子组件。 5.重复以上步骤即可实现多层弹窗的嵌套。 示例代码如下： // 父组件 <template> <div> <button @click="showModal = true">打开弹窗</button> <modal :show="showModal" @close="showModal = false"> <h2>这是一个弹窗</h2> <button @click="showSubModal = true">打开子弹窗</button> <sub-modal :show="showSubModal" @close="showSubModal = false"> <h2>这是一个子弹窗</h2> </sub-modal> </modal> </div> </template> <script> import Modal from './Modal.vue' import SubModal from './SubModal.vue' export default { components: { Modal, SubModal }, data() { return { showModal: false, showSubModal: false } } } </script> // modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script> // sub-modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭子弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Misha韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值