|
|
@@ -60,12 +60,24 @@
|
|
|
<div class="normal-black ">
|
|
|
<div >
|
|
|
<el-link :underline="false">
|
|
|
- <i
|
|
|
- class="el-icon-menu "
|
|
|
- @click.stop="showMenu($event,data, node)"
|
|
|
- v-if="node.level != 1"
|
|
|
-
|
|
|
- ></i>
|
|
|
+ <el-tooltip placement="right" effect="light" >
|
|
|
+ <div slot="content">
|
|
|
+ <ul
|
|
|
+ class="contextmenu"
|
|
|
+ >
|
|
|
+ <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{item.label}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <i
|
|
|
+ class="el-icon-menu "
|
|
|
+
|
|
|
+ v-if="node.level != 1"
|
|
|
+
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
<i
|
|
|
class="el-icon-refresh"
|
|
|
@click="synctree(data, node)"
|
|
|
@@ -75,21 +87,7 @@
|
|
|
</el-link>
|
|
|
|
|
|
|
|
|
- <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
|
|
|
- <ul
|
|
|
- v-show="menuvisible"
|
|
|
- :style="{ left: menuleft + 'px', top: menutop + 'px' }"
|
|
|
- class="contextmenu"
|
|
|
- >
|
|
|
-
|
|
|
- <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
- <i :class="item.icon"></i>
|
|
|
- <span>{{item.label}}</span>
|
|
|
- </li>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </ul>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -127,7 +125,7 @@
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
- <span
|
|
|
+ <span
|
|
|
class="marleft10"
|
|
|
v-show="data.moreShow"
|
|
|
|
|
|
@@ -135,12 +133,24 @@
|
|
|
<div class="normal-black ">
|
|
|
<div >
|
|
|
<el-link :underline="false">
|
|
|
- <i
|
|
|
- class="el-icon-menu "
|
|
|
- @click.stop="showMenu($event,data, node)"
|
|
|
- v-if="node.level != 1"
|
|
|
-
|
|
|
- ></i>
|
|
|
+ <el-tooltip placement="right" effect="light" >
|
|
|
+ <div slot="content">
|
|
|
+ <ul
|
|
|
+ class="contextmenu"
|
|
|
+ >
|
|
|
+ <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{item.label}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <i
|
|
|
+ class="el-icon-menu "
|
|
|
+
|
|
|
+ v-if="node.level != 1"
|
|
|
+
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
<i
|
|
|
class="el-icon-refresh"
|
|
|
@click="synctree(data, node)"
|
|
|
@@ -148,19 +158,11 @@
|
|
|
|
|
|
></i>
|
|
|
</el-link>
|
|
|
- <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
|
|
|
- <ul
|
|
|
- v-show="menuvisible"
|
|
|
- :style="{ left: menuleft + 'px', top: menutop + 'px' }"
|
|
|
- class="contextmenu"
|
|
|
- >
|
|
|
- <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
- <i :class="item.icon"></i>
|
|
|
- <span>{{item.label}}</span>
|
|
|
- </li>
|
|
|
-
|
|
|
- </ul>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</span>
|
|
|
</span>
|
|
|
@@ -1243,7 +1245,7 @@ export default {
|
|
|
mouseLeave (data) {
|
|
|
if (data.moreShow) {
|
|
|
this.$set(data, 'moreShow', false)
|
|
|
- this.menuvisible=false
|
|
|
+ // this.menuvisible=false
|
|
|
}
|
|
|
},
|
|
|
mouseOver (data) {
|
|
|
@@ -1872,8 +1874,8 @@ export default {
|
|
|
},
|
|
|
//展示菜单
|
|
|
showMenu(e,data,node){
|
|
|
- e.preventDefault();
|
|
|
- console.log(e,'e');
|
|
|
+ // e.preventDefault();
|
|
|
+ // console.log(e,'e');
|
|
|
var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
|
|
|
var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
|
|
|
this.menutop = y-70;
|
|
|
@@ -2034,27 +2036,60 @@ export default {
|
|
|
font-size: s;
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+.el-tooltip__popper .contextmenu {
|
|
|
+ margin: -12px; /* 抵消 Tooltip 的默认内边距 */
|
|
|
+}
|
|
|
.contextmenu {
|
|
|
+ padding: 4px 0; /* 添加适当的内边距 */
|
|
|
+ // min-width: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.contextmenu ul {
|
|
|
+ list-style: none; /* 移除小圆点 */
|
|
|
+ padding: 0;
|
|
|
margin: 0;
|
|
|
+ // min-width: 80px;
|
|
|
background: #fff;
|
|
|
- z-index: 1000;
|
|
|
- position: fixed; //关键样式设置固定定位
|
|
|
- list-style-type: none;
|
|
|
- padding: 5px 0;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333;
|
|
|
- box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
.contextmenu li {
|
|
|
- margin: 0;
|
|
|
- padding: 7px 16px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.contextmenu li i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
-.contextmenu li:hover {
|
|
|
- background: #eee;
|
|
|
+
|
|
|
+
|
|
|
+.contextmenu li span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.contextmenu li:hover,
|
|
|
+.contextmenu li.active {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.contextmenu li.divider {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ margin: 4px 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
.config_type{
|
|
|
display: inline-block;
|
