检查 v-dialog 是否打开并停止音频播放

Question

我希望 v-dialog 上有一个观察器，可以在对话框打开时停止播放音频文件。通常我会有 v-model="dialogVisible" 然后添加一个手表。但由于我有多个对话框，我不得不为对话框使用 v-model="media.show"。

 this.audioPlayer.pause()
 this.isPlaying = false

我现在如何检查对话框何时打开，然后设置以上内容以防止在对话框打开时播放音频文件？

<v-list-item-action>
            <div v-if="media.url.includes('mp3')">
              <v-btn
                v-if="isPlaying && (currentMedia.id === media.id)"
                icon
                @click="pause"
              >
                <v-icon>pause</v-icon>
              </v-btn>
              <v-btn
                v-else
                icon
                @click="play(media)"
              >
                <v-icon>play_arrow</v-icon>
              </v-btn>
            </div>
            <div v-else>
              <v-dialog
                v-model="media.show"
                persistent
                width="800px"
                :retain-focus="false"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    icon
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-icon>mdi-open-in-new</v-icon>
                  </v-btn>
                </template>
                <v-card>
                  <Video
                    v-if="media.show"
                    :video-url="media.url"
                  />
                </v-card>
                <v-card-actions>
                  <v-spacer />
                  <v-btn
                    color="primary"
                    text
                    @click="media.show = false"
                  >
                    Close
                  </v-btn>
                </v-card-actions>
              </v-dialog>
            </div>
          </v-list-item-action>

Answer 1

你能做的是watch for a 。在你的情况下 media.show。当它改变时，这会触发您的对话框显示。所以当你看到那个道具发生变化时，你可以触发一个你可以做任何事情的功能。在这种情况下，我们将在值变为真时暂停音乐并恢复它变为假。

watch: {
    media: {
        deep: true,
        handler(newVal) {
            //Modal is displayed
            if (newval.show) {
                this.audioPlayer.pause()
                this.isPlaying = false
            } else {
                //Resume when modal is closed (optional(
                this.audioPlayer.play();
                this.isPlaying = false;
            }
        }
    }
}

检查 v-dialog 是否打开并停止音频播放

Check if v-dialog is open and stop audio playing

vue.js

vuetify.js