@hscmap/vue-menu
Version:
Vue component for menu & contextmenu
63 lines (60 loc) • 2.77 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>VueMenu standalone</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="./vue-menu-standalone.js"></script>
<script>
window.addEventListener('load', e => {
new Vue({
el: document.getElementById('root'),
data: {
checked: true,
alert: function (msg) { window.alert(msg) }
}
})
})
</script>
<style>
body {
margin: 0;
background-color: #777;
}
</style>
</head>
<body>
<div id="root">
<hsc-menu-style-white>
<hsc-menu-bar style="border-radius: 0 0 4pt 0;">
<hsc-menu-bar-item label="File">
<hsc-menu-item label="New" @click="alert('New')"></hsc-menu-item>
<hsc-menu-item label="Open" @click="alert('Open')"></hsc-menu-item>
<hsc-menu-separator></hsc-menu-separator>
<hsc-menu-item label="Save" @click="alert('Save')" :disabled="true"></hsc-menu-item>
<hsc-menu-item label="Export to">
<hsc-menu-item label="PDF"></hsc-menu-item>
<hsc-menu-item label="HTML"></hsc-menu-item>
</hsc-menu-item>
</hsc-menu-bar-item>
<hsc-menu-bar-item label="Edit">
<hsc-menu-item label="Undo" keybind="meta+z" @click="alert('Undo')"></hsc-menu-item>
<hsc-menu-separator></hsc-menu-separator>
<hsc-menu-item label="Cut" keybind="meta+x" @click="alert('Cut')"></hsc-menu-item>
<hsc-menu-item label="Copy" keybind="meta+c" @click="alert('Copy')"></hsc-menu-item>
<hsc-menu-item label="Paste" keybind="meta+v" @click="alert('Paste')" :disabled="true">
</hsc-menu-item>
</hsc-menu-bar-item>
<hsc-menu-bar-item label="Checkmark">
<hsc-menu-item label="Check" @click="checked=true" :disabled="checked"></hsc-menu-item>
<hsc-menu-item label="Unheck" @click="checked=false" :disabled="!checked"></hsc-menu-item>
<hsc-menu-separator></hsc-menu-separator>
<hsc-menu-item :label="checked ? '😃 Checked' : '😯 Not Checked'" :checked="checked"
@click="checked = !checked"></hsc-menu-item>
</hsc-menu-bar-item>
</hsc-menu-bar>
</hsc-menu-style-white>
</div>
</body>
</html>