vue-context-menu
Version:
vue context-menu component
134 lines (120 loc) • 2.95 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Context Menu</title>
<style>
html {
font-family: sans-serif;
font-size: 14px;
color: #333;
background: whitesmoke;
}
.colored-box {
height: 8em;
width: 8em;
display: inline-block;
margin-right: .75rem;
border: 1px solid;
box-shadow: 1px 1px gray;
opacity: .75;
}
.example {
border: 1px solid darkgray;
padding: 2rem 1rem;
margin: 0;
box-shadow: 1px 1px lightgray;
opacity: .75;
color: #000;
}
.rhs {
font-size: 1.1rem;
float: right;
width: 40vw;
padding: .5rem 0 1rem 0;
min-height: 8em;
margin: 1rem 0;
}
.lhs {
float:left;
padding: 0 1em;
}
h2 {
margin: .5rem 0;
}
hr {
margin: 1rem auto;
}
</style>
</head>
<body>
<div id="app">
<div class="lhs">
<h2 >Vue Context Menu - Demo</h2>
<p>right-click on a colored square to trigger a custom context menu</p>
<div
v-for="(color, index) in colors"
class="colored-box"
:style="{background: color}"
@click="sayColor(color)"
@contextmenu.prevent="$refs.ctx.open($event, {color: color, index: index})">
</div>
</div>
<div class="rhs">
Local Menu Data: <pre class="example">{{ menuData }}</pre>
</div>
<div style="clear:both;"></div>
<hr>
<pre class="example">{{ contextClicks }}</pre>
<context-menu id="testingctx" ref="ctx" @ctx-open="onCtxOpen" @ctx-cancel="resetCtxLocals" @ctx-close="onCtxClose">
<li class="ctx-header">{{menuData.color}}</li>
<li class="ctx-item">option one</li>
<li class="ctx-item disabled">option two (disabled)</li>
<li class="ctx-item" @click="logClick($event, menuData)">add to log</li>
</context-menu>
</div>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="vue-context-menu.js"></script>
<script>
// install globally as <context-menu>
Vue.use(VueContextMenu)
const newMenuData = () => ({ color: null })
new Vue({
el: '#app',
data() {
return {
colors: ['pink', 'lightblue', 'green', 'red', 'turquoise'],
showCtx: false,
menuData: newMenuData(),
contextClicks: []
}
},
methods: {
onCtxOpen(locals) {
console.log('open', locals)
this.menuData = locals
},
onCtxClose(locals) {
console.log('close', locals)
},
resetCtxLocals() {
this.menuData = newMenuData()
},
logClick(e,context) {
this.contextClicks.push(Object.assign({},this.menuData))
return logger('click')(context)
},
sayColor(color) {
window.alert('left click on ' + color)
}
}
})
function logger(n) {
let name = 'event:ctx-' + n
return function(...more) {
console.log(name, ...more)
}
}
</script>
</body>
</html>