main.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import VueSidePanel from 'vue3-side-panel'; import 'vue3-side-panel/dist/vue3-side-panel.css'; const app = createApp(App); app.use(VueSidePanel); // Register the side panel globally // Mount the app app.mount("#app"); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<template> <div id="app"> <!-- Button to toggle the side panel --> <button @click="isOpened = !isOpened">Open Side Panel</button> <!-- VueSidePanel usage --> <VueSidePanel v-model="isOpened" lock-scroll hide-close-btn> <!-- Fixed header area --> <template #header> <div> <h2>This is a fixed header!</h2> <span @click="isOpened = false">X</span> </div> </template> <!-- Body area that can scroll --> <template #default> <div style="height: 100%; background-color: #ccc;"> <h2>This is scrolled body!</h2> </div> </template> <!-- Fixed footer area --> <template #footer> <h2>This is a fixed footer!</h2> </template> </VueSidePanel> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { VueSidePanel } from 'vue3-side-panel'; import 'vue3-side-panel/dist/vue3-side-panel.css'; export default defineComponent({ components: { VueSidePanel }, setup() { const isOpened = ref(false); // Control panel visibility return { isOpened }; } }); </script> |
