• iview tree render 自定义右键菜单(解决部分场景下官网tree右键菜单bug)


    // 树组件
    <Tree v-bind:data="structTreeData" v-bind:render="renderContent" @@on-select-change="selectChange"></Tree>
    
    // render函数
    renderContent (h, params) {
        return [
                h('span',{
                    attrs:{ id: `merge-tree-node-${params.data.Id}`},
                    style:{ position: 'relative'},
                    on:{
                        contextmenu: (e) => {
                            e.preventDefault();
                            this.handleMergeTreeContextMenu(params.data);
                        },
                    },
                },
                [
                    h('span',{},params.data.title),
                    h('Icon', {
                        props: {
                            type: 'ios-arrow-forward'
                        },
                        class:{
                            'right-icon':true,
                            'colorblue':true
                        }
                    }),
                    h('Icon', {
                        props: {
                            type: 'ios-arrow-forward'
                        },
                        style:{
                            marginLeft:'-10px'
                        },
                        class:{
                            'right-icon':true,
                            'colorblue':true
                        }
                    }),
                    (params.data.Id == this.currentStructTreeContextMenuNode.Id && this.customIviewTreeContextmenuStatus)
                    ? h('div',{ class:'custom-iview-tree-contextmenu ivu-select-dropdown ivu-dropdown-transfer'},[
                         h('ul',{ class:'ivu-dropdown-menu'},[
                            ((this.currentStructTreeContextMenuNode.NodeType=='struct' && this.currentStructTreeContextMenuNode.StructType==2) || this.currentStructTreeContextMenuNode.NodeType=='merge')
                            ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.openCreateFolderModal()}}},'新建文件夹')
                            : null,
                            (this.currentStructTreeContextMenuNode.NodeType=='merge')
                            ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.openEditFolderModal(this.currentStructTreeContextMenuNode)}}},'重命名')
                            : null,
                            (this.currentStructTreeContextMenuNode.NodeType=='merge')
                            ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.deleteFolderModal(this.currentStructTreeContextMenuNode)}}},'删除')
                            : null
                         ])
                    ])
                    :null
                ])
        ]
    },
    
    
    // 右键节点
    handleMergeTreeContextMenu (node) {
        let that = this;
        // 处理数据
        this.currentStructTreeContextMenuNode = node;
        this.customIviewTreeContextmenuStatus = true;
        // 建立监听(点击页面内任意空白区域关闭右键菜单)
        let hiddenStructTreeContextMenu = function(e){
            that.customIviewTreeContextmenuStatus = false;
            document.body.removeEventListener("click",hiddenStructTreeContextMenu,false);
        }
        document.body.addEventListener("click",hiddenStructTreeContextMenu,false);
    },
    
    
    // 样式
    .custom-iview-tree-contextmenu {
        position: absolute;
        will-change: top, left;
        transform-origin: center top;
        top: 20px;
        left: 0;
    }
    
        .custom-iview-tree-contextmenu .ivu-dropdown-item:hover {
            color: #2d8cf0;
        }
  • 相关阅读:
    Jmeter性能测试--自己看到的博客收集
    python日志logging
    java学习day12--API-File文件流
    java学习day12--API-IO简介--流简介
    java学习day12--API-SimpleDateFormat--BigDecimal/BigInteger类
    java学习day12--API-包装类-Date类
    equals方法和 == 的使用
    java学习day11--API--Object类-String类-StringBuilder类
    构造方法和普通方法的区别
    java中的修饰符总结
  • 原文地址:https://www.cnblogs.com/sangzs/p/15127238.html
Copyright © 2020-2023  润新知