vue实现按钮弹框弹出图片视频表格表单等

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现按钮弹框弹出图片视频表格表单等相关的知识,希望对你有一定的参考价值。

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

  1. 📢 个人简介: 哈喽!小伙伴们,我是水香木鱼,水瓶座一枚 😜 来自于黑龙江 庆安
  2. 🏡 本站首页: 水香木鱼
  3. 🚀 博客主页: 陈春波 👉 开源博客模板【纯前端开发-Vue3+TS+Ant Design of Vue】,来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。
  4. 🎨 系列专栏:后台管理系统
  5. 📖 人生格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
  6. 🌏 小目标: 成为前端布道师

期待已久的 vue 弹框(el-button+el-dialog组合),今天 它来啦!炸雷、炸雷、炸雷,崩塌卡茨…

📑 文章内容

内容特点:少量代码 又不难,是你喜欢的类型。

1、按钮

<el-button @click="playVideo"> 案例视频 </el-button>

2、对话框

  • visible:(是否显示 Dialog,支持 .sync 修饰符)
  • close:(Dialog 关闭的回调)
  • width:(弹出框的宽度大小)
  • title:(显示的标题)
<el-dialog
  :visible.sync="videoVisible"
  width="80%"
  title="案例视频"
  @close="closeDialog"
>
  <div style="height:500px;text-align:center">
    <!--需要弹出的内容部分-->
    <video
      width="100%"
      height="100%"
      :src="minioBaseUrl + '/demo-video/system.mp4'"
      controls="controls"
      ref="video"
    ></video>
  </div>
</el-dialog>

3、定义状态

data() 
    return 
      //默认false 弹框隐藏状态    
       videoVisible: false,
    
,
methods: 
    //点击按钮时,触发弹出效果
    playVideo() 
        //触发点击时,让其显示
        this.videoVisible = true
    ,
    //事件操作 (表格、表单 同理 需要执行的事件 在此处)
    closeDialog() 
      //点击播放视频
      this.$refs.video.pause()
    ,


博主致谢

非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了(vue实现按钮弹框[视频、图片、表单、表格等]),希望可以帮到大家,谢谢。

👉 如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧! 点击关注+点赞+收藏+评论+转发 】支持一下哟

😛 您的支持就是我更新的最大动力。👇


往期精彩

前端开发:颜色代码速查表【英文颜色、HEX格式、RGB格式】

OCR文字识别【前端渲染,后端进行逻辑处理】

前端添加水印效果攻略【vue和原生js添加方式】

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

一文图解前端WebSocket 实时通信

以上是关于vue实现按钮弹框弹出图片视频表格表单等的主要内容,如果未能解决你的问题,请参考以下文章

vue拦截路由回退弹出弹框

vue给模态框弹窗添加路由,实现页面后退可以关闭模态框

vue elementUI之Form表单 验证

鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

layui简单小问题,如何将下面的弹层事件绑定到按钮AA上

vue的确认弹框加格式