发布作业

src/components/VDrawer.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="drawer" v-show="show">
+    <div class="content">
+      <slot></slot>
+      <div class="footer" v-if="$slots.hasOwnProperty('footer')">
+        asd
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VDrawer",
+  props: {
+    show: {default: false, type: Boolean}
+  }
+}
+</script>
+
+<style scoped>
+.drawer {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.content {
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  width: 80%;
+  height: 80%;
+  background-color: white;
+}
+
+</style>

src/router/index.js

@@ -34,6 +34,10 @@ const router = createRouter({
             path: 'axios',
             name: 'axios',
             component: () => import('../views/Axios.vue')
+        }, {
+            path: 'drawer',
+            name: 'drawer',
+            component: () => import('../views/Drawer.vue')
         },]
     }, {
         path: '/pure',

src/router/menu.js

@@ -7,4 +7,5 @@ export default [
     {title: "计算属性", path: '/computed'},
     {title: "抽奖游戏", path: '/turntable'},
     {title: "Axios", path: '/axios'},
+    {title: "InputNum", path: '/drawer'},
 ]

src/views/Drawer.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-drawer v-model:show="show">
+    content
+  </v-drawer>
+</template>
+
+<script>
+import {onMounted, ref} from "vue"
+import VDrawer from "@/components/VDrawer.vue";
+
+export default {
+  name: "Drawer",
+  components: {VDrawer},
+  setup() {
+    const show = ref(true)
+    onMounted(() => {
+      setInterval(() => {
+        show.value = !show.value
+      }, 1000)
+    })
+    return {show}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>