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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<template> <div> <vue-file-toolbar-menu :content="myMenu" /> </div> </template> <script> import VueFileToolbarMenu from "vue-file-toolbar-menu"; export default { components: { VueFileToolbarMenu }, data() { return { happy: false, theme: "light", }; }, computed: { myMenu() { return [ { text: "File", menu: [ { text: "New File", icon: "note_add", click: () => alert("New File created!"), }, { text: "Open File", icon: "folder_open", click: () => alert("Open File clicked!"), }, { type: "separator" }, // Add a visual separator { text: "Exit", icon: "exit_to_app", click: () => alert("Exiting the app..."), }, ], }, { text: "Edit", menu: [ { text: "Undo", icon: "undo", click: () => alert("Undo last action"), }, { text: "Redo", icon: "redo", click: () => alert("Redo last action"), }, ], }, { text: "View", menu: [ { text: "Toggle Theme", icon: this.theme === "light" ? "brightness_7" : "brightness_4", click: () => this.toggleTheme(), }, ], }, { text: "My Button", active: this.happy, icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied", click: () => (this.happy = !this.happy), }, { text: "Help", menu: [ { text: "About", icon: "info", click: () => alert("About this app..."), }, { text: "Documentation", icon: "description", click: () => alert("Opening Documentation..."), }, ], }, ]; }, }, methods: { toggleTheme() { this.theme = this.theme === "light" ? "dark" : "light"; alert(`Switched to ${this.theme} theme!`); }, }, }; </script> <style> /* Add some simple styling for better appearance */ .vue-file-toolbar-menu { background-color: #f8f9fa; padding: 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .vue-file-toolbar-menu-item:hover { background-color: #e9ecef; } </style> |
