19410908a8
无参数测试和参数测试都通过了 2. 增加了一个contentmenuList做右键菜单内容的渲染和调用 —— 如果需要将参数提出出来做样式的配置，我需要一个参数列表。 Former-commit-id: 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly a1a2811342e61d0008f9199254070d700fd3b5bc [formerly 118b051ea28087166f54eedbf4af330e827f3e9c [formerly e4ec6d960fca41d9fbc5c5247ec2dff051bd52ee]]]]] Former-commit-id: 81e60a1c9c6f35d4683d6caa8ba1e0fa69f8a2e7 Former-commit-id: fd9303ed5c8c13a87a67ee2b803aab4f45665eca Former-commit-id: 8cf659c2a6adf39509fd79ecd295bc020ca833a4 [formerly 242bb104727c67d7c5fb3d2861ca3fb09e8c91a4] Former-commit-id: 2fa2f3625e7db96c90c1dcf2fba4da685f233be8 Former-commit-id: bc7df38e257b2025ce107f09b01292ba256ee94c Former-commit-id: d07007823fcd159cb496ed0db922e017449a5ea6 Former-commit-id: 72e5cd2e6d9c3293f38fa6eee6fb34b3e6947ad3 Former-commit-id: f704ab58381896ae24c78f6bf677fc9e23c73273
68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<div class="d2-contextmenu" v-show="flag" :style="style">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.d2-contextmenu {
|
|
position: absolute;
|
|
padding: 5px 0;
|
|
z-index: 2018;
|
|
background: white;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
name: 'd2-contextmenu',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
x: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
y: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
computed: {
|
|
flag: {
|
|
get () {
|
|
console.log('change flag')
|
|
if (this.visible) {
|
|
// 注册全局监听事件[目前只考虑鼠标解除触发]
|
|
window.addEventListener('mousedown', this.watchContextmenu)
|
|
}
|
|
return this.visible
|
|
},
|
|
set (newVal) {
|
|
this.$emit('update:visible', newVal)
|
|
}
|
|
},
|
|
style () {
|
|
return {
|
|
left: this.x + 'px',
|
|
top: this.y + 'px',
|
|
display: this.visible === true ? 'block' : 'none '
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
watchContextmenu (event) {
|
|
if (!this.$el.contains(event.target)) this.flag = false
|
|
window.removeEventListener('mousedown', this.watchContextmenu)
|
|
}
|
|
},
|
|
mounted () {
|
|
// 将菜单放置到body下
|
|
document.querySelector('body').appendChild(this.$el)
|
|
}
|
|
}
|
|
</script>
|