效果
image.png
右键点击靠下的位置
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: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
menuVisible: false,
}
},
components: {
contextButton
},
methods: {
rowContextmenu (row, column, event) {
this.menuVisible = false
this.menuVisible = true
// 阻止右键默认行为
event.preventDefault()
this.$nextTick(() => {
this.$refs.contextbutton.init(row,column,event)
})
},
foo() { // 取消鼠标监听事件 菜单栏
this.menuVisible = false
document.removeEventListener('click', this.foo)
},
handleOne () {
console.log('点击菜单一')
},
handleTwo () {
console.log('点击菜单二')
},
handleThree () {
console.log('点击菜单三')
},
}
}
</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) {
// 设置菜单出现的位置
// 具体显示位置根据自己需求进行调节
let menu = document.querySelector('#contextmenu')
let cha = document.body.clientHeight - event.clientY
console.log(document.body.clientHeight,event.clientY,cha)
// 防止菜单太靠底，根据可视高度调整菜单出现位置
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) // 给整个document添加监听鼠标事件，点击任何位置执行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>
