08335 / hivui-platform-template
hivui平台项目模板
Newer
Older
hivui-platform-template / project / hivuiMain / views / layout / components / tabpanel / contextMenu.jsx
caibinghong on 4 Jun 2021 add

const drpMenus={
    name:'PTabitem',
    props:{
    }, 
//    inject:[''],
    data(){
        return {
            menuStyle:{
                right:0,
                left:'initial',
                top:0,
                display:'none',
                overflow:'auto',
                maxHeight:'50%'
            }
        }
    },
    mounted(){
        document.body.appendChild(this.$el);
        document.addEventListener('click',this.hide)
    },
    beforeDestroy(){ 
        this.$el.remove();
        document.removeEventListener('click',this.hide)
    },
    methods:{
       show(y){
           if(y){
            this.menuStyle.top=(y||0)+'px';
           }            
            this.menuStyle.display='block'
       },
       hide(){
            this.menuStyle.display='none'
       }
    },    
    render(h){
        const Props={
            style:this.menuStyle,
            on:{
                mouseout:()=>{this.hide()},
                mouseover:()=>{this.show()}
            }
        }
        return (
            <ul class="pl-menus pl-menus-inline pl-menus-sub pl-menus-pop" {...Props}>
                <li class="pl-menus-item">
                    <a class="title">
                        <i class="icon iconfont "></i>
                        <span class="txt">{$lang('refresh')||'刷新'}</span>
                    </a>
                </li> 
                <li class="pl-menus-item">
                    <a class="title">
                        <i class="icon iconfont "></i>
                        <span class="txt">{$lang('closeOther')||'关闭其它'}</span>
                    </a>
                </li> 
                <li class="pl-menus-item">
                    <a class="title">
                        <i class="icon iconfont "></i>
                        <span class="txt">{$lang('closeLeft')||'关闭左侧'}</span>
                    </a>
                </li> 
                <li class="pl-menus-item">
                    <a class="title">
                        <i class="icon iconfont "></i>
                        <span class="txt">{$lang('closeRight')||'关闭右侧'}</span>
                    </a>
                </li> 
                <li class="pl-menus-item">
                    <a class="title">
                        <i class="icon iconfont "></i>
                        <span class="txt">{$lang('closeAll')||'关闭所有'}</span>
                    </a>
                </li> 
            </ul>
        )
    }
}

export default drpMenus;