vue中提示框 this.$confirm怎么设置进度条

在Vue中，使用Element UI的MessageBox组件的this.$confirm方法弹出提示框，无法直接设置进度条。该方法主要用于展示一个确认对话框，提供确认和取消按钮供用户选择。

如果你想要在Vue中显示一个含有进度条的提示框，你可以考虑使用其他库或自定义组件来实现。例如，你可以使用Vue Loading Bar插件或者自己编写一个包含进度条的组件。这样可以更好地满足你的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue电商后台管理](https://blog.csdn.net/weixin_45860609/article/details/106664460)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

相关问题

vue-video-player 点击进度条时，如果看过了就可以返回没看过继续播放不允许点击...

你可以在 Vue Video Player 组件中监听 `timeupdate` 事件，该事件会在视频播放位置发生变化时触发。在该事件中，可以判断当前视频播放位置是否超过了用户观看的位置，如果超过了就暂停视频播放，弹出提示框提示用户是否继续观看。如果用户选择继续观看，可以将视频的 `currentTime` 属性设置为用户观看位置，继续播放视频。

以下是一个简单的实现示例：

<template>
  <div>
    <video ref="video" @timeupdate="handleTimeUpdate"></video>
    <div @click="handleClickProgress"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watchedTime: 0, // 用户观看的时间点
      isPlaying: false // 是否正在播放视频
    };
  },
  methods: {
    handleTimeUpdate() {
      const video = this.$refs.video;
      if (this.isPlaying && video.currentTime > this.watchedTime) {
        // 视频播放位置超过了用户观看位置，暂停视频播放
        video.pause();
        this.isPlaying = false;
        // 弹出提示框，询问用户是否继续观看
        const isContinue = confirm("是否继续观看？");
        if (isContinue) {
          // 用户选择继续观看，将视频播放位置设置为用户观看位置，继续播放视频
          video.currentTime = this.watchedTime;
          video.play();
          this.isPlaying = true;
        }
      }
    },
    handleClickProgress() {
      const video = this.$refs.video;
      if (!this.isPlaying) {
        // 视频未播放，无法跳转进度条
        return;
      }
      // 获取用户点击的位置
      const progress = document.querySelector(".progress");
      const rect = progress.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const percent = x / rect.width;
      const currentTime = percent * video.duration;
      if (currentTime < this.watchedTime) {
        // 用户点击的位置在观看位置之前，无法跳转进度条
        return;
      }
      // 跳转视频进度条
      video.currentTime = currentTime;
    }
  }
};
</script>

在上述示例中，我们通过 `watchedTime` 变量来记录用户观看视频的位置，通过 `isPlaying` 变量来记录视频是否正在播放。在 `handleTimeUpdate` 方法中，我们监听视频播放位置变化事件，当视频播放位置超过了用户观看位置时，暂停视频播放并弹出提示框，询问用户是否继续观看。如果用户选择继续观看，我们将视频播放位置设置为用户观看位置，并继续播放视频。在 `handleClickProgress` 方法中，我们监听进度条的点击事件，根据用户点击的位置跳转视频进度条。注意，如果用户点击的位置在观看位置之前，则无法跳转进度条。