首先,vue和普通的html页面不太一样。vue的生命周期必须加载完才可以操作dom,生命周期这里不再叙述,自行学习,或者也在mounted和created的时候使用this.$nextTick方法,来使方法在dom生成以后再进行操作。
禁止复制可以通过以下方法,首先是禁止选择,然后就是禁止右键功能,
<template>
<section class="p-10">
<div class="app">
<p> 11111111111111111111111111111111111111111 </p>
</div>
</section>
</template>
<script>
export default {
created() {
this.$nextTick(() => {
// 禁用右键
document.oncontextmenu = new Function("event.returnValue=false");
// 禁用选择
document.onselectstart = new Function("event.returnValue=false");
});
}
};
</script>
这样的话,既不能选择到我们的文本内容,又不能右键进行选择,可以基本上防止复制了。
ps: 想获取文本的话,可以通过F12审查元素,或者百度快照,哈哈哈