预览视频动态组件添加关闭按钮

src/components/VideoPreview/src/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="video-box">
-    <video :src="src" class="video" controls autoplay></video>
+  <div class="background-box">
+    <div class="video-box">
+      <el-button type="primary" class="close-icon" @click="destroyElement">关闭</el-button>
+      <video :src="src" class="video" controls autoplay></video>
+    </div>
   </div>
 </template>
 
@@ -8,14 +11,20 @@
 export default {
   data() {
     return {
-      src: '',
+      src: ''
     }
   },
+  methods: {
+    destroyElement() {
+      this.$destroy(true)
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-.video-box {
+.background-box {
   position: fixed;
   inset: 0;
   background-color: rgba($color: #000000, $alpha: 0.325);
@@ -23,8 +32,18 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  .video {
+  .video-box {
     width: 50%;
+    position: relative;
+    .close-icon {
+      position: absolute;
+      margin: auto;
+      right: 0;
+      top: -50px;
+    }
+    .video {
+      width: 100%;
+    }
   }
 }
 </style>