vue项目禁止复制

在vue项目中禁止复制其实很简单,只需要加入以下代码既可:

一、js的方法,在生命周期函数中添加:

在vue 2.x中:
<template>
    <div>
        test
    </div>
</template>

<script>
export default {
    mounted() {
        // 禁用复制
        this.$nextTick(() => {
            document.onselectstart = new Function("event.returnValue=false");
        })
    },
}
</script>
在vue 3.0中:
<template>
    <div>
        test 2
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
    // 禁用复制
    document.onselectstart = new Function("event.returnValue=false");
})
</script>

<style scoped>
</style>

二、添加全局css(也可以添加在单个页面):

//全局选择
*{
user-select:none;
}
//或者部分标签
.test-class{
user-select:none;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容