在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ [ElementUi] 需要實(shí)現(xiàn) `tree`組件上右鍵彈出菜單并且 `獲得 t

[ElementUi] 需要實(shí)現(xiàn) `tree`組件上右鍵彈出菜單并且 `獲得 tree node的id值`

ElementUi官網(wǎng) 沒(méi)有 tree組件的右鍵功能 , 請(qǐng)問(wèn)哪里有 demo 參考 ?

現(xiàn)在有一個(gè)需求需要在 tree 組件上實(shí)現(xiàn) 右鍵彈出功能菜單;

但是實(shí)踐操作 elementui tree 組件 僅響應(yīng)左鍵;

是否有大佬有相關(guān)解決思路. 或者類似demo參考;

回答
編輯回答
魚梓

步驟流程

[TOC]

# 屏蔽頁(yè)面右鍵默認(rèn)顯示的工具菜單

為元素綁定一個(gè) oncontextmenu 事件

<body>
    <div id="app"  oncontextmenu="self.event.returnValue=false">
        // ...vue代碼/模板
    </div>
</body>

# 為元素綁定右鍵菜單

思路: 右鍵元素(tree 節(jié)點(diǎn))時(shí)觸發(fā)節(jié)點(diǎn)左鍵綁定的事件

<el-tree 
:data="data" 
:props="defaultProps" 
@node-click="handleNodeClick" 
@contextmenu.native='contextmenuTrigger=true'>

此處注意, 右鍵菜單綁定在 tree 組件上

# 在元素右鍵時(shí)獲得 tree 節(jié)點(diǎn)的信息

methods: {
  // handleNodeClick為 elementui 封裝的事件函數(shù)(@node-click), 左鍵點(diǎn)擊節(jié)點(diǎn)時(shí)觸發(fā);
  // http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 搜索關(guān)鍵詞: node-click 
  handleNodeClick(data) {
    console.log(data);
    // !核心 : 節(jié)點(diǎn)數(shù)據(jù)被獲得
    this.thisformdata = data;
  }
}
  • 加上
// vue鉤子: 頁(yè)面加載完畢后 , 通onload
mounted() {
    /**
    * 部門管理 tree 組件, 右鍵功能
    * 這里我借助了jq, 使用原生也可以, 核心思想即調(diào)用 tree 節(jié)點(diǎn)的左鍵事件
    * */
    $(document).on('contextmenu', '#departmentTree [role="treeitem"]', function (event) {
        // 此處阻止冒泡是因?yàn)楣?jié)點(diǎn)層級(jí)過(guò)深, 必須阻止    
        event.stopPropagation();
        // 調(diào)用 tree 節(jié)點(diǎn)左鍵點(diǎn)擊綁定的事件
        $(this).click();
    });
},

# 最后, 點(diǎn)擊桌面使得功能欄元素隱藏(即使得右鍵菜單元素失焦)

建議參考: https://segmentfault.com/q/10...

授人予魚不如授人予漁

雖然有爛尾的嫌疑, 但是

來(lái)口交我啊!

最后一步使得 功能欄失焦的方法 實(shí)在 想不出來(lái), 可以聯(lián)系我的qq, 在我的個(gè)人信息里;
加好友時(shí)請(qǐng)附上你的簡(jiǎn)略信息
!

原文鏈接: https://segmentfault.com/q/10...

附錄1 :

附錄2 :

2017年11月14日 21:54