标签：box style 树状 menu elementui 右键 foo border event

<el-tree :highlight-current="highlight" :data="folderList" :props="defaultProps" @node-contextmenu="rightClick" @node-click="handleNodeClick"  style="min-width: 100%;display: inline-block;"></el-tree>   <div id="contextmenu"            v-show="menuVisible"            class="menu">         <div class="contextmenu__item" @click="addDialogFolder"              >添加</div>         <div class="contextmenu__item"              >删除</div>          <div class="contextmenu__item"          >更名文件</div>     </div> methods: {           foo() {             // 取消鼠标监听事件 菜单栏             this.menuVisible = false             document.removeEventListener('click', this.foo) // 关掉监听，           },           styleMenu(menu) {             if (event.clientX > 1800) {               menu.style.left = event.clientX - 100 + 'px'             } else {               menu.style.left = event.clientX + 1 + 'px'             }             document.addEventListener('click', this.foo) // 给整个document新增监听鼠标事件，点击任何位置执行foo方法             if (event.clientY > 700) {               menu.style.top = event.clientY - 30 + 'px'             } else {               menu.style.top = event.clientY - 10 + 'px'             }           },           rightClick(row, column, event){             // if(column.id){               this.pid = column.id;               this.testModeCode = row.testModeCode               this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true               this.menuVisible = true // 显示模态窗口，跳出自定义菜单栏               // event.preventDefault() //关闭浏览器右键默认事件               this.CurrentRow = row               var menu = document.querySelector('.menu')               this.styleMenu(menu)             // }else{
            // }                        }, }   style{ .contextmenu__item {   display: block;   line-height: 34px;   text-align: center; } .contextmenu__item:not(:last-child) {   border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .menu {   position: absolute;   background-color: #fff;   width: 100px;   /*height: 106px;*/   font-size: 12px;   color: #444040;   border-radius: 4px;   -webkit-box-sizing: border-box;   box-sizing: border-box;   border-radius: 3px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);   white-space: nowrap;   z-index: 1000; } .contextmenu__item:hover {   cursor: pointer;   background: #66b1ff;   border-color: #66b1ff;   color: #fff; }
}

 

 

 

标签：box,style,树状,menu,elementui,右键,foo,border,event
来源： https://www.cnblogs.com/caiguanzheng/p/15801134.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。