Vue自定義指令實現(xiàn)點擊右鍵彈出菜單示例詳解
一、實現(xiàn)思路
1.使用contextmenu事件
該需求需要攔截瀏覽器的右擊事件,更改為自定義監(jiān)聽事件,可使用@contextmenu.prevent直接綁定一個監(jiān)聽函數(shù),它的作用就是攔截右擊事件并觸發(fā)綁定的監(jiān)聽事件。
其次,為了在右擊的位置打開菜單,我們需要獲取鼠標點擊的位置;一般來說,若綁定的函數(shù)沒有自定義參數(shù),則可以直接使用默認的參數(shù)e來獲取;若綁定的函數(shù)具有自定義參數(shù),則需要定義$event來獲取位置,即
@contextmenu.prevent="rightclick(index, indexMeasure, $event)
最后,通過參數(shù)event可獲取鼠標點擊的橫向X軸值和豎直Y軸值,然后使用固定定位來對菜單進行偏移,因為固定定位是相對于瀏覽器窗口,且獲取的X和Y軸值也是相對于瀏覽器窗口的。
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
2.點擊菜單之外的任意地方關(guān)閉菜單
在mounted里邊監(jiān)聽全局的點擊事件即可
mounted () {
// 鼠標點擊其他位置時隱藏菜單
document.onclick = function () {
menu.style.display = 'none';
}
}
3.菜單置于圖層的最頂層
該需求是為了避免在點擊菜單項時,觸發(fā)了其他元素綁定的監(jiān)聽函數(shù)。這其實跟圖層有關(guān),我們只需要將菜單置到頂層即可。使用的是z-index屬性,如下
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
二、源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Vue自定義指令實現(xiàn)右鍵菜單</title>
<script src="js/vue.js"></script>
<style>
/* 自定義右鍵菜單 */
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
#menu ul {
margin: 5px 0;
}
#menu li {
height: 30px;
line-height: 30px;
color: #21232E;
font-size: 12px;
text-align: center;
cursor: default;
list-style-type: none;
border-bottom: 1px dashed #cecece;
}
#menu li:hover {
background-color: #cccccc;
}
.block {
height: 300px;
width: 400px;
background-color: pink;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="itany">
<div style="position: relative;">
<div class="block" v-rightclick>1</div>
<div class="block" v-rightclick>2</div>
<div class="block" v-rightclick>3</div>
<div class="block" v-rightclick>4</div>
<div class="block" v-rightclick>5</div>
<div class="block" v-rightclick>6</div>
<!-- 自定義鼠標右鍵菜單 -->
<div id="menu">
<ul>
<li v-for="item in rightMenuList" @click="item.handler">
{{item.text}}
</li>
</ul>
</div>
</div>
</div>
<script>
Vue.directive('rightclick', function (el, binding) {
el.oncontextmenu = function (e) {
console.log('e.clientY', e.clientY)
// console.log('e.clientX', e.clientX)
e.preventDefault();
menu.style.display = 'block';
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
}
});
var vm = new Vue({
el: '#itany',
data: {
rightMenuList: [
{
id: 0,
text: "開通道",
handler: () => {
alert('通道開啟成功');
}
},
{
id: 1,
text: "關(guān)通道",
handler: () => {
alert('通道關(guān)閉成功');
}
},
{
id: 2,
text: "重啟通道",
handler: () => {
alert('通道重啟成功');
}
},
]
},
methods: {
},
mounted () {
// 鼠標點擊其他位置時隱藏菜單
document.onclick = function () {
menu.style.display = 'none';
}
}
});
</script>
</body>
</html>以上就是Vue自定義指令實現(xiàn)點擊右鍵彈出菜單示例詳解的詳細內(nèi)容,更多關(guān)于Vue自定義指令右鍵彈出菜單的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽
這篇文章主要介紹了vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
vue報錯"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報錯"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01

