for_client/src/global/components/hc-menu-simple/index.vue

<template>
    <div class="hc-menu-simple-box" :class="ui">
        <template v-for="item in datas" :key="item.key">
            <div class="item-box" :class="item?.key === keysValue ? 'active' : ''" @click="MenuClick(item)" @contextmenu.prevent.stop="menuLabelContextMenu($event,item)">
                <div class="icon-box" v-if="item?.icon">
                    <HcIcon :name="item?.icon" fill/>
                </div>
                <div class="label-box truncate">{{item?.label}}</div>
                <el-badge :value="item?.badge" v-if="item?.badge > 0"/>
                <!--操作菜单-->
                <div class="menu-icon" :class="item.showMenuIcon?'show':''" v-if="menusData.length > 0">
                    <div class="menu-popover-icon" @click.prevent.stop="menuLabelContextMenu($event,item)">
                        <HcIcon name="apps" ui="text-2xl"/>
                    </div>
                </div>
                <!--操作菜单 END-->
            </div>
        </template>
        <!--右键菜单-->
        <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" v-if="menusData.length > 0" @closed="handleMenuClosed"/>
    </div>
</template>

<script setup>
import { ref,watch } from "vue";
import {getObjValue, isValueNull} from "vue-utils-plus"
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    datas: {
        type: Array,
        default: () => ([])
    },
    keys: {
        type: [String,Number],
        default: ''
    },
    menus: {
        type: Array,
        default: () => ([])
    },
})

//初始变量
const keysValue = ref(props.keys)
const menusData = ref(props.menus)
const menuItemData = ref({})

//监听
watch(() => [
    props.keys,
    props.menus
], ([keys, menus]) => {
    menusData.value = menus
    keysValue.value = keys
})

//事件
const emit = defineEmits(['change', 'menuTap'])
const MenuClick = (item) => {
    if (item?.key !== keysValue.value) {
        emit('change', item)
    }
}

//鼠标右键事件
const contextMenuRef = ref(null)
const menuLabelContextMenu = (e,item) => {
    const rows = menusData.value || [];
    if (rows.length > 0) {
        e.preventDefault();
        menuItemData.value = item;
        item.showMenuIcon = true
        //展开菜单
        contextMenuRef.value?.showMenu(e)
    } else {
        menuItemData.value = false;
        item.showMenuIcon = false
    }
}

//鼠标右键菜单被点击
const handleMenuSelect = ({key}) => {
    const item = getObjValue(menuItemData.value);
    emit('menuTap', {key, item})
}

//菜单关闭
const handleMenuClosed = () => {
    const item = menuItemData.value;
    if (!isValueNull(item)) {
        menuItemData.value['showMenuIcon'] = false
    }
}
</script>

<style lang="scss" scoped>
.hc-menu-simple-box {
    position: relative;
    padding: 20px;
    .item-box {
        position: relative;
        display: flex;
        align-items: center;
        background: #f1f5f8;
        border-radius: 6px;
        padding: 8px 14px;
        margin-bottom: 10px;
        transition: 0.2s;
        .icon-box {
            position: relative;
            width: 22px;
            height: 22px;
            border-radius: 5px;
            background-color: var(--el-color-primary-light-8);
            color: var(--el-color-primary-light-5);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            transition: 0.2s;
        }
        .label-box {
            position: relative;
            color: #838791;
            font-size: 14px;
            transition: 0.2s;
            flex: 1;
        }
        .menu-icon {
            position: relative;
            pointer-events: none;
            transition: opacity 0.2s;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 2px;
            opacity: 0;
            .menu-popover-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #878787;
            }
            &.show {
                opacity: 1;
                pointer-events: all;
                cursor: context-menu;
            }
        }
        &:not(.active) {
            cursor: pointer;
        }
        &:hover {
            .icon-box {
                color: #ffffff;
                background-color: var(--el-color-primary);
            }
            .label-box {
                color: #1a1a1a;
                font-weight: 500;
            }
            .menu-icon {
                opacity: 1;
                pointer-events: all;
                cursor: context-menu;
            }
        }
        &.active {
            box-shadow: var(--hc-shadow);
            .icon-box {
                color: #ffffff;
                background-color: var(--el-color-primary);
            }
            .label-box {
                color: #1a1a1a;
                font-weight: 500;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.hc-menu-simple-box .item-box .el-badge {
    position: absolute;
    display: flex;
    right: 12px;
}
</style>