【vue】简单的页面与多弹窗结构

最新推荐文章于 2024-05-05 08:00:00 发布
最新推荐文章于 2024-05-05 08:00:00 发布
阅读量349 收藏
点赞数
文章标签： elementui 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011859584/article/details/130196399
版权

学习记录

场景

实现page有A、B两个弹窗，从A弹窗能够打开C弹窗。

感觉最容易实现的方式：

物理上A，B，C弹窗都挂在同一个page上，再利用父子主键传递方法实现从A弹窗打开C弹窗

p.s.

可能会引起render错误的结构：

【err】 物理上A，B弹窗都挂在同一个page，C弹窗挂在A的内容页面上

人生艰难，后端还要学vue

(｡ ́︿ ̀｡)

凉叶似良
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
weixin_39630498的博客
12-22 2157
简单介绍一下vue中常用dialog组件的封装：实现动态传入内容，实现取消，确认等回调函数。首先写一个基本的弹窗样式，如上图所示。在需要用到弹窗的地方中引入组件：import dialogBar from './dialog.vue'components:{'dialog-bar': dialogBar,},点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示在弹窗组件中定义一个value值：v...
vue 多个子组件内弹窗层级显示问题
weixin_44387725的博客
07-23 4353
vue 多个子组件内弹窗层级显示问题 问题是vue 父组件调用多个子组件元素内的弹窗显示层级混乱冲突问题 父组件调用的box子组件,子组件内调用自定义的dialog弹窗 层级混乱效果如下 由于html下无论dialog弹窗的层级是多少都会按父元素的层级来计算, 所以box6的层级大于box3的层级,导致弹窗显示层级低于box6, 如果只有box3的子组件有弹窗的话,最简单的办法就是提高box3的层级就可以解决,但同时我的box6子组件也有弹窗,所以冲突 解决办法 方法一: 第一种解决办法就是把dial
Vue按照顺序实现多级弹窗（附Demo）
最新发布
码农研究僧的博客
05-05 1692
Vue按照顺序实现多级弹窗，以Demo展示，显示整体逻辑
vue的弹窗（多级弹窗）研究心得
热水钟博客
04-19 8380
在vue开发中弹窗用的次数比较多，例如添加修改页面常用，个人习惯把弹窗例如添加组件当成列表组件中的子组件进行引入，所以一定要把弹窗脚本写在子组件中，通过子组件的v-if语句进行控制，在弹窗的子组件关闭事件中写一个回调函数控制子组件是否加载达到弹窗的目的，注意弹窗的缺省按纽别用，一定要采用slot方式更灵活。二级弹窗时，不管你设置z-index等均无法控制二级弹窗在后面，一直隐藏在后面，后面发现可...
Vue3多个弹窗同时出现解决思路
海风依旧
12-01 5697
Vue3多个弹窗同时出现解决思路：弹窗或者说对话框是我们在开发系统或者页面很常用的元素，所以博主想对出现多个弹窗的情况下的解决思路进行一个整理
VUE实现可随意拖动的弹窗组件
10-17
在Vue.js中实现一个可随意拖动的弹窗组件，主要涉及到事件监听、CSS样式以及组件的状态管理。这个组件主要用于解决在PC端使用时，没有现成的可拖动弹窗功能的问题。以下是对实现该功能的关键知识点的详细说明： 1. ...
Vue自定义全局弹窗组件操作
10-14
Vue自定义全局弹窗组件操作是一项常见的前端开发...这种做法提高了代码的组织性和可维护性，使得在多个场景下复用同一弹窗组件变得非常简单。同时，通过参数配置，可以实现各种不同的弹窗效果，满足不同场景的需求。
vue-dialog:vue自定义弹窗组件（含回调）
05-10
如果需要更复杂的弹窗结构，可以使用`template`选项提供一个Vue模板字符串，或者通过`component`选项注册一个自定义组件作为弹窗内容。 3. **全局配置**： 你可以通过`Vue.use(Dialog, { options })`来设置全局的...
使用Vue组件实现一个简单弹窗效果
12-11
总结起来，本文详细介绍了如何使用Vue.js实现一个简单的弹窗组件，包括组件的基本结构、CSS样式、slot插槽的使用、props的接收和$emit的事件触发。通过这种方式，你可以根据项目需求自定义弹窗样式和内容，同时实现...
vue弹窗消息组件的使用方法
08-27
Vue 弹窗消息组件是一种常见的用户交互元素，用于在页面上显示临时通知、警告或确认信息。在 Vue 应用中，实现这样的组件可以帮助开发者更方便地管理界面的反馈信息，提升用户体验。以下是对 Vue 弹窗消息组件的详细...
vue多级多选菜单组件开发
09-01
主要为大家分享了vue多级多选菜单组件开发案例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE点击消息弹窗4种滑动效果，外部动态传参
12-29
一个slide.js，一个slide.html，HTML内动态传参，控制所展示的弹窗位置。可以从上弹出，从左，从下等。写的非常精美，包括可以动态显示title，字体图标等等。
一个基于Vue20的弹窗组件PC
08-10
一个基于Vue2.0的弹窗组件(PC)
vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(二)——二级弹框
weixin_44867717的博客
12-07 1040
弹框
vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(三)——三级弹框
weixin_44867717的博客
12-07 1071
弹框
vue 弹框
weixin_38879321的博客
03-14 2146
弹框 一、组件代码 <template> <div class="MisDialog"> <el-dialog v-if="dialogVisible" :custom-class="className" :width="`${width}px`" :fullscreen="fullscreen" top="24vh" :visible.sync="dialogVisible" :t
vue多弹窗解决问题
hmbbpdx的博客
11-11 1894
vue弹窗解决(实习) 希望有更好的方法提出意见 虚心接受
vue多实例的骚操作，主要用于解决组件全局弹窗面板的问题。。。
JokerSoulClub的博客
01-30 711
通过vue手动挂载实例，并通过render函数传递props进行组件通信的方式，可以实现任意的弹出面板，兼容性强，不用考虑烦人的overflow问题。
vue2中同一个页面怎么正确引用并使用多个popup弹窗
06-01
在Vue2中，可以使用组件的方式来引用并使用多个popup弹窗。下面是一个简单的示例代码： 1. 在项目中创建一个popup组件，命名为popup.vue，这个组件包含了弹窗的HTML结构和相应的逻辑处理。 2. 在需要使用弹窗的页面中，使用Vue的动态组件来引用popup组件，通过传递props来控制弹窗的显示和隐藏。 示例代码如下： popup.vue: ``` <template> <div class="popup" v-if="show"> <div class="popup__content"> <h2>{{ title }}</h2> <p>{{ message }}</p> <button @click="close">关闭</button> </div> </div> </template> <script> export default { props: { show: Boolean, title: String, message: String }, methods: { close() { this.$emit('close'); } } } </script> ``` 使用popup组件的页面： ``` <template> <div> <button @click="showPopup1 = true">打开弹窗1</button> <button @click="showPopup2 = true">打开弹窗2</button> <popup v-if="showPopup1" :show="showPopup1" title="弹窗1" message="这是弹窗1的内容" @close="showPopup1 = false"></popup> <popup v-if="showPopup2" :show="showPopup2" title="弹窗2" message="这是弹窗2的内容" @close="showPopup2 = false"></popup> </div> </template> <script> import Popup from './popup.vue'; export default { data() { return { showPopup1: false, showPopup2: false }; }, components: { Popup } } </script> ``` 在上面的示例代码中，我们通过在使用popup组件的页面中，使用不同的props来控制不同的弹窗的显示和隐藏。由于每个弹窗使用的都是同一个popup组件，因此可以在一个页面中引用并使用多个popup弹窗。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值