// 树组件
<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;
}