main.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createApp } from 'vue'; import App from './App.vue'; import DropdownMenu from 'v-dropdown-menu' import 'v-dropdown-menu/css' const app = createApp(App) app.use(DropdownMenu) // Mount the Vue 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<template> <div class="app"> <h1>Dropdown Menu Example</h1> <!-- Dropdown Menu --> <dropdown-menu :isOpen="false" mode="click" direction="right" :overlay="true" overlayBgColor="rgba(0, 0, 0, 0.5)" :closeOnClickOutside="true" containerZIndex="1000" > <!-- Trigger Slot --> <template #trigger> <button class="dropdown-trigger">Open Dropdown</button> </template> <!-- Header Slot --> <template #header> <div class="dropdown-header">Dropdown Header</div> </template> <!-- Body Slot --> <template #body> <ul class="dropdown-body"> <li v-for="i in 6" :key="i"> <a href="#">Item {{ i }}</a> </li> </ul> </template> <!-- Footer Slot --> <template #footer> <div class="dropdown-footer">Dropdown Footer</div> </template> </dropdown-menu> </div> </template> <script setup> import DropdownMenu from "v-dropdown-menu"; </script> <style> .app { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } .dropdown-trigger { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .dropdown-header { font-weight: bold; padding: 10px; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; } .dropdown-body { list-style: none; padding: 0; margin: 0; } .dropdown-body li { padding: 10px; border-bottom: 1px solid #e9ecef; } .dropdown-body li a { text-decoration: none; color: #007bff; } .dropdown-footer { padding: 10px; background-color: #f8f9fa; border-top: 1px solid #e9ecef; } </style> |
