弹窗

src/components/header/index.vue

@@ -6,10 +6,10 @@
     </div>
     <tip-panel />
     <div
-      class="show-complete"
-      @click="showCompleteModal"
+      class="show-modal"
+      @click="showModal"
     >
-      show-complete
+      show-modal
     </div>
   </div>
 </template>
@@ -25,8 +25,8 @@ export default {
     created() {},
     mounted() {},
     methods: {
-        showCompleteModal() {
-            this.$modal.show('completeModal')
+        showModal() {
+            this.$modal.show('selectModal')
         }
     }
 }

src/components/modal/modalLayer.vue

 <template>
   <div class="modal-layer">
     <complete-modal />
+    <select-modal />
   </div>
 </template>
 
 <script>
 import CompleteModal from '@/components/modal/completeModal'
+import SelectModal from '@/components/modal/selectModal'
 export default {
     components: {
-        CompleteModal
+        CompleteModal,
+        SelectModal
     },
     data() {
         return {}

src/components/modal/selectContent.vue

+<template>
+  <div>
+    <div
+      class="close-btn"
+      @click="close"
+    >
+      close
+    </div>
+    选择视频
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    methods: {
+        close() {
+            this.$modal.hide('selectModal')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/modal/selectModal.vue

+<template>
+  <modal
+    name="selectModal"
+    :click-to-close="false"
+  >
+    <select-content />
+  </modal>
+</template>
+
+<script>
+import SelectContent from './selectContent'
+export default {
+    components: {
+        SelectContent
+    },
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>