yvan-window/src/component/Container/Desktop/PortalSelectDialogWindow/index.vue

<template>
    <div class="vue-portal-target" style="top: 30px; left: 10px;">
        <div class="v-btn-dropdown">
            <div tabindex="-1" role="listbox" class="v-menu v-menu-icon-menu" style="height: auto; width: auto; left: 0px; top: 0px; z-index: 15000;"
                :style="{display:portalDetail.display}">
                <div tabindex="0" class="v-trap-focus-indicator"></div>
                <div class="v-trap-focus-body">
                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select"
                        v-for="(detailMessage,detailMessageIndex) in portalDetail.detailMessageList" :key="detailMessage.id"
                        :class="detailMessage.cls"
                        @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
                        @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
                        @click.stop="clickMenuItem(detailMessageIndex)">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">{{detailMessage.title}}</span> <!---->
                    </div>
                    <!--
                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">资源监控</span>
                    </div>
                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">存储</span>
                    </div>
                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">已连接用户</span>
                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">计划的任务</span>
                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">文件更改日志</span>
                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">最新日志</span>
                        </div>
                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
                        <i class="v-icon v-icon--select"></i>
                        <span class="title">备份</span>>
                    </div>
                    -->
                    </div>
                <div tabindex="0" class="v-trap-focus-indicator"></div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                portalDetail:{
                    display: 'none',
                    selectedNum: 0,
                    detailMessageList:[
                        {
                            id:0,
                            title:'系统状况',
                            cls:'v-menu-item-select-selected selected active',
                        },
                        {
                            id:1,
                            title:'资源监控',
                            cls:'v-menu-item-select-selected selected',
                        },
                        {
                            id:2,
                            title:'存储',
                            cls:'',
                        },
                        {
                            id:3,
                            title:'已连接用户',
                            cls:'',
                        },
                        {
                            id:4,
                            title:'计划的任务',
                            cls:'',
                        },
                        {
                            id:5,
                            title:'文件更改日志',
                            cls:'',
                        },
                        {
                            id:6,
                            title:'最新日志',
                            cls:'',
                        },{
                            id:7,
                            title:'备份',
                            cls:'',
                        }

                    ]
                }
            }
        },
        methods: {
            // 点击选择框的每一项
            clickMenuItem(detailMessageIndex){
                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls
                if (cls.includes("v-menu-item-select-selected selected")) {
                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'active'
                    let obj = {
                        index: detailMessageIndex,
                        cls: 'v-widget-item sds-window-v5 syno-sds-widget-item',
                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
                    }
                    this.$bus.emit("showOrHiddenWidgetItem",obj)
                }else{
                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected active'
                    let obj = {
                        index: detailMessageIndex,
                        cls:'v-widget-item sds-window-v5 syno-sds-widget-item active',
                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls
                    }
                    this.$bus.emit("showOrHiddenWidgetItem",obj)
                }
                this.countSelectedMenuItem()
                this.$bus.emit("changeThumbHeight",this.portalDetail.selectedNum)

            },
            // 鼠标移入选择框的每一项
            mouseenterMenuItem(detailMessageIndex){
                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
                if (cls.includes("v-menu-item-select-selected selected")) {
                    this.portalDetail.detailMessageList[detailMessageIndex].cls =
                    "v-menu-item-select-selected selected active";
                } else if (cls === "") {
                    this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
                }
                if(detailMessageIndex && this.portalDetail.detailMessageList[0].cls.includes('active')){
                    this.portalDetail.detailMessageList[0].cls = this.portalDetail.detailMessageList[0].cls.replace('active','')
                }
            },
            // 鼠标移出选择框的每一项
            mouseleaveMenuItem(detailMessageIndex){
                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
                if (cls && cls.includes('active')){
                    this.portalDetail.detailMessageList[detailMessageIndex].cls = cls.replace('active','')
                }
            },
            // 显示或隐藏选择框
            showOrHiddenSelectWidgetItem(obj){
                if(obj.detailMessageList){
                    this.portalDetail.detailMessageList = JSON.parse(JSON.stringify(obj.detailMessageList))
                    if(this.portalDetail.display === 'none'){
                        this.portalDetail.display = 'block'
                        this.$bus.emit(
                        "showOrHiddenSelectWidgetPosition",'none'
                        );
                        let fn = (e)=>{
                            let el = document.querySelector('.v-widget-header-tool-icon.add')
                            if(e.srcElement !== el){
                                this.portalDetail.display = 'none'
                            }
                            window.removeEventListener('click',fn,true)
                        }
                        window.addEventListener('click',fn,true)

                    }else if(this.portalDetail.display === 'block'){
                        this.portalDetail.display = 'none'
                    }
                }
            },
            //统计已选择的个数
            countSelectedMenuItem(){
                this.portalDetail.selectedNum = 0
                this.portalDetail.detailMessageList.forEach(item=>{
                    if(item.cls && item.cls.includes('v-menu-item-select-selected selected')){
                        this.portalDetail.selectedNum ++
                    }
                })
            }
        },
        mounted(){
            this.$bus.on('showOrHiddenSelectWidgetItem',this.showOrHiddenSelectWidgetItem)
        },
        components:{
        }

    }
</script>