magic-editor/src/components/common/magic-context-menu.vue

<template>
    <ul class="magic-context-menu none-select" :style="style">
        <li v-for="(menu, key) in menus" :key="key" :class="{ divided: menu.divided }" @click.stop="() => {onMouseup(); menu.onClick && menu.onClick()}">
            <span v-if="hasIcon" class="magic-context-menu-icon"><magic-icon :icon="menu.icon" v-if="menu.icon" size="12px"/></span>
            <label>{{ menu.label }}</label>
        </li>
    </ul>
</template>
<script>
export default {
    props: {
        menus: Array,
        onDestory: Function,
        position: Object
    },
    data() {
        return {
            style: {
                left: this.position.x + 'px',
                top: this.position.y + 'px'
            }
        }
    },
    mounted(){
        document.addEventListener('click', this.onMouseup)
        const max = this.position.x + this.$root.$el.offsetWidth
        const rect = document.querySelector('.magic-editor').getBoundingClientRect()
        if(rect.x + rect.width < max){
            this.style.left = `${rect.x + rect.width - this.$root.$el.offsetWidth}px`
        }
        
    },
    unmounted(){
        document.removeEventListener('click', this.onMouseup)
    },
    methods: {
        onMouseup(){
            this.onDestory && this.onDestory()
        }
    },
    computed: {
        hasIcon(){
            return this.menus.some(it => it.icon)
        }
    }
}
</script>
<style scoped>
.magic-context-menu{
    position: fixed;
    z-index: 999999;
    background-color: var(--main-background-color);
    border: 1px solid var(--main-border-color);
}
.magic-context-menu li{
    height: 24px;
    line-height: 24px;
    padding:0 10px;
    cursor: pointer;
    display: flex;
}
.magic-context-menu li > * {
    cursor: pointer;
    word-break: keep-all;
}
.magic-context-menu li.divided{
    border-bottom: 1px solid var(--main-border-color);
}
.magic-context-menu .magic-context-menu-icon{
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    width: 13px;
}
.magic-context-menu li:hover{
    background-color: var(--select-option-hover-background-color);
    color: var(--select-option-hover-color);
}
.magic-context-menu li:hover :deep(.magic-icon){
    color: var(--select-option-hover-color);
}
</style>