vue.js javascript 前端 vue实现点击右键出现自定义操作菜单

.menu_box {

position: fixed;

z-index: 1004;

background-color: #fff;

// border-radius: 5px;

.menu{

width: 100px;

text-align: left;

// padding: 5px;

box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

.menu_item{

height: 24px;

line-height: 22px;

// margin-top: 5px;

}

.item_text{

color: #171A1D;

cursor: pointer;

padding: 4px 20px;

// border-radius: 3px;

transition: all .2s ease-in;

}

.item_text:hover {

background-color: #E9EAEC;

}

}

}

@contextmenu.prevent.stop 为阻止浏览器的右键点击菜单事件isShowMenu: 来控制菜单的显示

三、页面逻辑

同时我们要为其出现的地方进行调整 menuTop，menuLeft，在展示 menu 的时候我们将 event 的页面位置属性 e.pageX 和 e.pageX 拿来赋值我们需要在页面创建的时候增加 click 和 mousedonw 的监听，这样就可以在我们点击别的地方的时候将菜单隐藏

// 右键菜单

const isShowMenu = ref(false) // 控制是否显示右键菜单

const menuLeft = ref(0)

const menuTop = ref(0)

const openMenuConfigId = ref(0) // 打开右键菜单的那一行的configId

const isNowTop = ref(false) // 是否已置顶

const showMenu = async(e:any, index:number, configId:number):Promise => {

// console.log(e, index, configId)

// eslint-disable-next-line

const data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')

data.forEach((item:any) => {

if (item.configId === configId) {

if (item.isTop) {

isNowTop.value = true

} else {

isNowTop.value = false

}

}

})

openMenuConfigId.value = configId

isShowMenu.value = true

menuLeft.value = e.pageX

menuTop.value = e.pageY

}

// 置顶

const stick = async(status:boolean):Promise => {

// eslint-disable-next-line

let data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')

data.forEach((item:any) => {

if (item.configId === openMenuConfigId.value) {

item.isTop = status

}

})

const topList:any[] = []

data.forEach((item:any) => {

if (item.isTop) {

topList.push(item)

}

})

topList.sort((a:any, b:any) => (b.maxCreateTime - a.maxCreateTime))

data = data.filter((item:any) => (item.isTop === false))

data.sort((a:any, b:any) => (b.maxCreateTime - a.maxCreateTime))

data = topList.concat(data)

warnList = JSON.parse(JSON.stringify(data))

$forceUpdate()

// eslint-disable-next-line

window.app.windowStoreData(store.userBaseInfo.username + '.data.warn', data)

clockMenu()

}

// 删除

const showDelPop = ref(false)

const deleteList = async():Promise => {

// eslint-disable-next-line

let data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')

data = data.filter((item:any) => (item.configId !== openMenuConfigId.value))

warnList = JSON.parse(JSON.stringify(data))

$forceUpdate()

// eslint-disable-next-line

window.app.windowStoreData(store.userBaseInfo.username + '.data.warn', data)

clockMenu()

}

// 关闭菜单

const clockMenu = ():void => {

isShowMenu.value = false

}

// 失去焦点时关闭右击菜单

mounted() {

//失去焦点时关闭右击菜单

document.addEventListener("click", (e) => {

if (!this.$refs.rightMenu.contains(e.target))

this.rightMenuVisible = false;

});

}

四、希望能帮到你

精彩文章