vue3+elementPlus：element 面板的切换盒子的动态样式_elementplus 更改折叠面板样式-优快云博客

本文介绍了如何在Vue3项目中，利用ElementPlus的el-tree组件结合原生DOM动态绑定方法，实现右键自定义菜单跟随鼠标位置。通过`@contextmenu`事件和`boxAffixStyle`函数调整菜单高度，以实现实时跟踪效果。

style动态绑定一个函数，element 面板盒子样式，使用原生dom样式修改法

//html
 <div class="box-affix" ref="boxAffix" :style="boxAffixStyle()">
  ....
</div>

//js
//boxAffix盒子样式，使用原生dom样式修改法
const boxAffixStyle = (val) => {
  if (datalist.tabName == 'second') {
    boxAffix.value.style = ` 
                        height:calc(100% - 162px); 
                            `
  } else if (datalist.tabName == 'first') {
    boxAffix.value.style = ` 
                        height:calc(100% - 118px); 
                            `
  }
}

//css
.box-affix {
  position: fixed;
  right: 5px;
  top: 112px;
  height: calc(100% - 118px);//面板高度
  width: calc(100% - 56px);
  overflow: hidden;
  border-radius: 5px;
  background-color: $backRGBA;
}

上一篇文章，

vue3+elementPlus：el-tree复制粘贴数据功能，并且有弹窗组件-优快云博客因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置。在tree控件里添加@contextmenu属性表示右键点击事件。https://blog.youkuaiyun.com/weixin_43928112/article/details/133680623