【el-dialog + video】控制视频弹框的显示与隐藏

已于 2022-04-07 20:35:46 修改
阅读量1k 收藏 4
点赞数 1
分类专栏： JS Vue 文章标签： vue elementui
于 2022-04-07 20:35:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56598099/article/details/124025512
版权
本文主要探讨了使用Vue和ElementUI在el-dialog组件中嵌入video元素时遇到的问题，包括如何消除el-dialog的原生样式、解决dialog关闭后视频继续播放以及切换视频源后视频未更新的问题。通过设置自定义class、创建video标签并利用dialogVisible属性控制视频弹框的显示和视频地址的绑定，实现弹框的正确操作。
摘要由CSDN通过智能技术生成

【el-dialog + video】点击跳出视频弹框

易错点

你是否出现过 “el-dialog原生样式难去掉”？
你是否出现过 “dialog关闭video继续播放”？
你是否出现过 “切换src，但视频还是之前的”？

上代码

  1. 设置class名 ，class=“video-dialog”；
.video-dialog {
   
  background: transparent;
  &::v-deep {
   
    .el-dialog__header {
   
      padding: 0;
    }
    .el-dialog__body {
   
      padding: 0;
    }
  }
}
  1. 创建标签
最低0.47元/天 解锁文章
JJJenny0607
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当对话框在不刷新页面的情况下被多次打开，可能会遇到自动校验的问题，即使用户没有主动触发校验。 这个...
关于el-dialog 下使用 video/audio/img 不播放不显示问题
panfeigaoCSDN的博客
05-11 1151
<audio controls="controls" :src="playUrl" autoplay="autoplay" ></audio> <video width="720" height="340" controls autoplay poster="../assets/img/xxx.jpg" :src="playUrl"> </video> data(){ return { playUrl..
HTML 5 video 视频标签全属性详解
weixin_34417635的博客
08-09 598
http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们...
el-dialog vue弹窗播放视频video
热门推荐
jiangjiang_ing的博客
01-03 1万+
主要代码如下： &lt;el-table-column align="center" label="视频url"&gt; &lt;template slot-scope="scope"&gt; &lt;el-button type="primary" @click="playVideo(scope.row)"
使用 el-dialog，弹框无法显示
m0_45284750的博客
11-22 570
使用 el-dialog，弹框无法显示，无报错不缺方法。点击以后遮罩层已经出来了，但是没有对话框，折腾好久，发现，加上 :append-to-body="true"就可以正常显示了。
el-dialog去掉自带样式
qq_45894929的博客
07-08 2351
<!-- 重置密码弹框 --> <el-dialog :visible.sync="dialogVisible" class="dialog" :show-close="false"> <div class="title"> <span>重置密码</span> <img src="../../assets/images/close.png" alt="" @click="close...
去掉dialog的黑边
code豆腐
12-14 504
AlertDialog.Builder builder = new AlertDialog.Builder( new ContextThemeWrapper(this, R.style.Theme_Transparent)); Dialog黑边问题
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
去掉element-dialog中header部分
weixin_47194802的博客
08-26 5476
我想要去掉一个弹出层的头部，因为用不到。添加一个这个属性即可。
vue可控显示隐藏的通用el-dialog表单组件CV
a_littleStory的博客
12-05 982
通用表单CV素材
videojs隐藏控制栏（详细信息）
weixin_42564841的博客
08-21 583
videojs
vue+videojs通过dialog弹窗播放M3U8视频流（解决关闭弹窗后继续抓取视频流问题）
lily233的博客
09-24 3258
最近公司要求开发一个播放监控的功能，要求是从列表点击后打开弹窗播放M3U8格式的视频， 首先安装videojs相关依赖： npm install --save video.js npm install --save videojs-contrib-hls 在页面中添加引用： import videoJs from 'video.js' import "videojs-contrib-hls" import 'video.js/dist/video-js.css' 在使用<video&.
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 3266
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
el-dialog的再封装(头部，尾部)
qq_36566924的博客
09-23 2144
dialog封装
elementui爬坑（持续更新）
weixin_42923333的博客
02-14 305
element-ui爬坑Dialog 对话框关闭对话框清除内容Notification 通知添加按钮标签 Dialog 对话框 关闭对话框清除内容 在对话框中加入了视频播放器，但是在关闭对话框后视频仍在播放，尝试在close事件清除对话框中的内容，事件并没有执行。before-close事件成功，同时要将:visible.sync='docVisible’中，docVisible设为false。 ...
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
tangdou369098655的博客
05-14 1万+
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。 我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景： 父组件引用子组件 <child-dialog :visible="visible"><
el-dialog组件隐藏时直接销毁组件
qq_43750656的博客
10-19 1709
使用el-dialog组件时，不通过v-model绑定的布尔类型的变量来控制是否隐藏展示，而是在需要不展示的时候直接销毁组件。在组件上标识 v-if 可控制组件隐藏时直接销毁dialog。
vue el-dialog嵌入video实现视频播放功能
wangjie的博客
07-03 1417
el-dialog弹窗实现视频播放，切换不同选项卡播放不同视频。
el-dialog内 el-tooltip弹框失效
最新发布
06-21
2. **`v-if`或`v-show`影响**：`el-dialog`的显示隐藏可能会导致`el-tooltip`的实例被销毁。确保`el-tooltip`的引用在`el-dialog`显示期间始终有效。 3. **DOM插入时机**：`el-tooltip`可能在`el-dialog`渲染之后才...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值