vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法_vue.js_

npm install vue-contextmenujs -S || yarn add vue-contextmenujs

mounted() { this.visible = true; for (let item of this.items) { if (item.icon) { this.hasIcon = true; break; } } /** * 修复超出溢出的问题 */ this.$nextTick(() => { const windowWidth = document.documentElement.clientWidth; const windowHeight = document.documentElement.clientHeight; const menu = this.$refs.menu; const menuWidth = menu.offsetWidth; const menuHeight = menu.offsetHeight; (this.openTrend === SUBMENU_OPEN_TREND_LEFT ? this.leftOpen : this.rightOpen)(windowWidth, windowHeight, menuWidth); this.style.top = this.position.y; if (this.position.y + menuHeight > windowHeight) { if (this.position.height === 0) { let diffVal = this.position.y + menuHeight - windowHeight; this.style.top = this.position.y - diffVal; if(this.position.ymenuHeight){ this.style.top = this.position.y; } }else{//点击的是下半屏 if(this.position.y>menuHeight){ this.style.top = this.position.y-menuHeight; } } } else { this.style.top = windowHeight - menuHeight; } } }); },

import Contextmenu from '@/components/global/vue-contextmenujs'; Vue.use(Contextmenu);