Vue 弹窗播放视频 - 代码示例及样式

<template>
  <div>
    <button @click="showModal = true">打开视频</button>
<pre><code>&lt;div v-if=&quot;showModal&quot; class=&quot;modal&quot;&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
    &lt;span class=&quot;close&quot; @click=&quot;showModal = false&quot;&gt;&amp;times;&lt;/span&gt;
    &lt;video src=&quot;path/to/video.mp4&quot; controls autoplay&gt;&lt;/video&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>
<style>
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  position: relative;
  width: 80%;
  max-width: 800px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
</style>
<p>在上面的代码中，当用户点击'打开视频'按钮时，<code>showModal</code>属性会被设置为<code>true</code>，从而显示弹窗。弹窗中包含一个<code>video</code>元素来播放视频，点击弹窗右上角的'X'按钮可以关闭弹窗，将<code>showModal</code>属性设置为<code>false</code>。</p>
<p>你需要将<code>src</code>属性设置为你想要播放的视频文件的路径。你也可以根据需要自定义弹窗和视频播放器的样式。</p>