使用el-dialog遇到的问题如何关闭弹窗前调用方法

扭曲的影子

已于 2022-04-07 18:37:25 修改

阅读量2k

点赞数

分类专栏：使用element-Ui遇到的问题文章标签： html5 vue elementui

于 2022-04-06 15:47:45 首次发布

本文链接：https://blog.csdn.net/qq_37544675/article/details/123991474

版权

使用element-Ui遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中使用el-dialog组件时遇到的一个问题：当通过右上角X号或ESC键关闭弹窗时，视频仍然在后台播放。作者通过在`@close`事件中调用`cancel`方法成功实现了点击按钮关闭时视频暂停，但需解决X号和ESC键同样效果的问题。解决方案是将`cancel`方法绑定到`@close`事件，确保弹窗无论通过何种方式关闭，都能正确停止视频播放。

摘要由CSDN通过智能技术生成

在使用el-dialog的时候我的需求遇到一个问题就是关闭弹窗视频停止播放

点击按钮调用方法没问题

但是使用弹窗右上角X号关闭弹窗和ESC快捷键关闭视频依然还在播放

在按钮上可以通过@click调用

那如何使用弹窗右上角X号关闭和ESC快捷键关闭调用同一方法呢？

实现如下

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  @close="cancel"  //就是这个
  center>
     <el-form-item  prop="noteImg">
        <template >
       <video ref="video" :src="my.mp4" controls autoplay style="height: 400px;width: 90%; background-color: #000000;" >
          		<!-- <source :src="my.mp4" > -->
          		您的浏览器暂不支持video标签，请更换浏览器后重试。
          	</video>
         </template>
      </el-form-item>
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
methods: {

      // 取消按钮
    cancel() {
      //视频结束  通过$refs获取video标签ref属性pause关闭视频
      this.$refs.video.pause();
        },
    },
    }
  };
</script>

@close就是控制弹窗关闭的属性

同时使用ESC快捷键关闭也是使用的这个属性