props: {
    domId: {
        type: String,
        default: "",
    },
    menu: {
        type: Array,
        default: () => {
            return [];
        },
    },
},

[
    {
        id: "1",
        label: "菜單1"
    },
    {
        id: "2",
        label: "菜單2",
        click: this.test
    },
    {
        id: "3",
        label: "菜單3"
    },
    {
        id: "4",
        label: "菜單4"
    },
    {
        id: "5",
        label: "菜單5"
    }
]

menuClick(item) {
    if (item.click) {
        item.click(item);
        return;
    }
    this.$emit("menuClick", item);
},

<template>
    <div>
        <div :id="uid" class="j-mouse-menu">
            <slot name="header"></slot>
            <ul>
                <li
                    v-for="menuItem in menu"
                    :key="menuItem.id"
                    @click="menuClick(menuItem)"
                >
                    {{ menuItem.label }}
                </li>
            </ul>
            <slot name="body"></slot>
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
import { getUId } from "../../../utils/strTool";
export default {
    name: "JMouseMenu",
    props: {
        domId: {
            type: String,
            default: "",
        },
        menu: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            uid: "",
        };
    },
    created() {
        this.setUid();
    },
    mounted() {
        this.init();
    },
    methods: {
        setUid() {
            this.uid = "j-mouse-menu-" + getUId();
        },
        init() {
            // 自定義鼠標(biāo)右鍵菜單欄
            const dom = document.getElementById(this.domId);
            if (!dom) return;
            const menu = document.getElementById(this.uid);
            const that = this;
            dom.oncontextmenu = function (e) {
                that.hideAllMenu(that.uid);
                // 自定義body元素的鼠標(biāo)事件處理函數(shù)
                e = e || window.event;
                e.preventDefault();
                let scrollTop =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop; // 獲取垂直滾動(dòng)條位置
                let scrollLeft =
                    document.documentElement.scrollLeft ||
                    document.body.scrollLeft; // 獲取水平滾動(dòng)條位置
                menu.style.display = "block";
                menu.style.left = e.clientX + scrollLeft + "px";
                menu.style.top = e.clientY + scrollTop + "px";
            };
            // 鼠標(biāo)點(diǎn)擊其他位置時(shí)隱藏菜單
            document.onclick = function () {
                that.hideAllMenu();
            };
        },
        hideAllMenu(id) {
            const jMenu = document.getElementsByClassName("j-mouse-menu");
            for (let i = 0; i < jMenu.length; i++) {
                if (jMenu[i].id != id) jMenu[i].style.display = "none";
            }
        },
        menuClick(item) {
            if (item.click) {
                item.click(item);
                return;
            }
            this.$emit("menuClick", item);
        },
    },
};
</script>

<style lang="less" scoped>
.j-mouse-menu {
    display: none;
    position: absolute;
    min-width: 8em;
    max-width: 15em;
    border: 1px solid #ccc;
    background: #eee;
    ul {
        margin: 5px 0;
        padding: 0;
    }
    li {
        height: 30px;
        line-height: 30px;
        color: #21232e;
        font-size: 12px;
        text-align: center;
        cursor: default;
        padding: 0;
        margin: 0;
        list-style-type: none;
        border-bottom: 1px dashed #cecece;
        &:hover {
            background-color: #cccccc;
        }
    }
}
</style>

<j-mouse-menu
    :domId="'j-mouse-menu-view-content1'"
    :menu="myMenu"
    @menuClick="menuClick"
>
    <template v-slot:header>
        <div class="menu-slot-header">??JYeontu</div>
    </template>
    <template v-slot:footer>
        <div class="menu-slot">
            ????
        </div>
    </template>
</j-mouse-menu>

data(){
    return {
        myMenu: [
            {
                id: "1",
                label: "菜單1"
            },
            {
                id: "2",
                label: "菜單2",
                click: this.test
            },
            {
                id: "3",
                label: "菜單3"
            },
            {
                id: "4",
                label: "菜單4"
            },
            {
                id: "5",
                label: "菜單5"
            }
        ]
    }
},
methods:{
    menuClick(menuItem) {
        alert("點(diǎn)擊了：" + menuItem.label);
    },
    test(menuItem) {
        alert("test-" + menuItem.id);
    },
    alert(label) {
        alert("點(diǎn)擊了：" + label);
    }
}