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

尔滨丶陈春波

已于 2022-07-25 16:28:42 修改

阅读量1.8w

点赞数 14

分类专栏：后台管理系统文章标签： vue.js javascript

于 2022-04-14 15:21:44 首次发布

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/124172679

版权

后台管理系统专栏收录该内容

58 篇文章 57 订阅

订阅专栏

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

🔎 了解博主

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

期待已久的 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()
    },
}