67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<template>
|
|
<a-menu
|
|
:style="{ left: position.left, top: position.top }"
|
|
class="contextmenu"
|
|
v-show="visible"
|
|
@click="handleClick"
|
|
:selectedKeys="[]"
|
|
>
|
|
<a-menu-item :key="item.key" v-for="item in itemList">
|
|
<a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{ item.text }}
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Contextmenu',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
position: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({ left: '0px', top: '0px' }),
|
|
},
|
|
itemList: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
},
|
|
},
|
|
created() {
|
|
window.addEventListener('mousedown', this.closeMenu)
|
|
},
|
|
methods: {
|
|
closeMenu(e) {
|
|
if (!e.target.closest('.contextmenu')) {
|
|
this.$emit('update:visible', false)
|
|
}
|
|
},
|
|
handleClick({ key }) {
|
|
this.$emit('select', key)
|
|
this.$emit('update:visible', false)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.contextmenu {
|
|
position: fixed;
|
|
z-index: 999;
|
|
// border: 1px solid #9e9e9e;
|
|
border-radius: 4px;
|
|
box-shadow: 2px 2px 10px #aaaaaa !important;
|
|
}
|
|
|
|
.contextmenu /deep/ .ant-menu-item:hover {
|
|
// background: @primary-color;
|
|
background: #f2f2f2;
|
|
// color: white;
|
|
}
|
|
</style>
|