<template>
<div class="hello" @cilck="clicks" @contextmenu.prevent="stop($event)">
<h1 @click="seeWidth">测试</h1>
<div class="noCopy">测试禁用复制功能</div>
<div class="noCopy">测试禁用复制功能</div>
<div class="noCopy">测试禁用复制功能</div>
<span v-show="issee" id="rightClickMenu" class="el-menu-vertical">
<ul>
<li>111</li>
</ul>
<ul>
<li>qqq</li>
<li>www</li>
<li>rrr</li>
</ul>
</span>
</div>
</template>
<script>
export default {
name: 'First',
data(){
return {
issee:false
}
},
methods:{
//js禁止鼠标选中,来控制复制功能
//第一种方式 通过js来控制
、、第二种 通过css来控制 ,见class样式.noCopy
seeWidth(){
//document.addEventListener('click', () => {
// this.issee = true;
// })
document.onselectstart = function(){ return false; };// 禁止文字选择
document.oncopy = function(){ return false; };// 禁止复制
document.oncut = function(){ return false; };// 禁止剪切
document.onpaste = function(){ return false; };// 禁止粘贴
},
stop (event){
this.issee = true;
const see=document.body.clientWidth
const heightt= document.body.clientHeight
let menu = document.querySelector("#rightClickMenu");
menu.style.left =event.clientX + 180>see?see-200+'px':event.clientX + 20 + "px"
menu.style.top = event.clientY +157 >heightt?heightt-127+'px':event.clientY + "px";
// menu.style.left = event.clientX + 20 + "px";
// menu.style.top = event.clientY + "px";
menu.style.position = "absolute"; // 为新创建的DIV指定绝对定位
menu.style.width = 160 + "px";
// return false
},
clicks(){
this.issee = false;
}
},
}
</script>、
<style scoped>
.noCopy{
height:100px;
/* css控制复制功能 */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.el-menu-vertical {
border: 1px solid rgb(84, 92, 100);
border-radius: 5px;
z-index: 100;
}
</style>
前端js禁止左键选中操作,并且左键提示框的位置控制。
最新推荐文章于 2022-11-10 19:30:42 发布