效果
image.png
右鍵點(diǎn)擊靠下的位置
image.png
<!--表格頁代碼 -->
<template>
<div class="hello">
<el-table
:data="tableData"
@row-contextmenu="rowContextmenu"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<context-button v-if="menuVisible" @foo="foo" ref="contextbutton" @handleOne="handleOne" @handleTwo="handleTwo" @handleThree="handleThree"></context-button>
</div>
</template>
<script>
import contextButton from './contextButton/index'
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}],
menuVisible: false,
}
},
components: {
contextButton
},
methods: {
rowContextmenu (row, column, event) {
this.menuVisible = false
this.menuVisible = true
// 阻止右鍵默認(rèn)行為
event.preventDefault()
this.$nextTick(() => {
this.$refs.contextbutton.init(row,column,event)
})
},
foo() { // 取消鼠標(biāo)監(jiān)聽事件 菜單欄
this.menuVisible = false
document.removeEventListener('click', this.foo)
},
handleOne () {
console.log('點(diǎn)擊菜單一')
},
handleTwo () {
console.log('點(diǎn)擊菜單二')
},
handleThree () {
console.log('點(diǎn)擊菜單三')
},
}
}
</script>
==================================================
<!-- 菜單頁代碼 contextButton/index.vue -->
<template>
<div id="contextmenu" class="contextmenu">
<div class="contextmenu__item" @click="handleOne()">菜單一</div>
<div class="contextmenu__item" @click="handleTwo()">菜單二</div>
<div class="contextmenu__item" @click="handleThree()">菜單三</div>
</div>
</template>
<script>
export default {
name: "index",
data () {
return {
}
},
methods: {
init (row, column,event) {
// 設(shè)置菜單出現(xiàn)的位置
// 具體顯示位置根據(jù)自己需求進(jìn)行調(diào)節(jié)
let menu = document.querySelector('#contextmenu')
let cha = document.body.clientHeight - event.clientY
console.log(document.body.clientHeight,event.clientY,cha)
// 防止菜單太靠底奄薇，根據(jù)可視高度調(diào)整菜單出現(xiàn)位置
if (cha < 150) {
menu.style.top = event.clientY -120 + 'px'
} else {
menu.style.top = event.clientY -10 + 'px'
}
menu.style.left = event.clientX + 10 + 'px'
document.addEventListener('click', this.foo) // 給整個(gè)document添加監(jiān)聽鼠標(biāo)事件，點(diǎn)擊任何位置執(zhí)行foo方法
},
foo () {
this.$emit('foo')
},
handleOne () {
this.$emit('handleOne')
},
handleTwo () {
this.$emit('handleTwo')
},
handleThree () {
this.$emit('handleThree')
},
}
}
</script>
<style scoped>
.contextmenu__item {
display: block;
line-height: 34px;
text-align: center;
}
.contextmenu__item:not(:last-child) {
border-bottom: 1px solid rgba(64,158,255,.2);
}
.contextmenu {
position: absolute;
background-color: #ecf5ff;
width: 100px;
/*height: 106px;*/
font-size: 12px;
color: #409EFF;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(64,158,255,.2);
white-space: nowrap;
z-index: 1000;
}
.contextmenu__item:hover {
cursor: pointer;
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
</style>
