网站添加复制提醒和右键菜单提醒

前言

在网站设计中，弹窗的使用常常是为了提醒用户或执行某种功能。而我在探索过程中发现，虽然常见的弹窗功能有“复制提醒”、“禁用F12”以及“禁用鼠标右键”，但很少见到如此全面且美观的设计。今天，我特意为大家分享这款独特设计的弹窗，不仅涵盖了常见的“禁用Ctrl+U”、“禁用Ctrl+S”、“禁用Ctrl+Shift+I”等功能，更在视觉上带来了令人眼前一亮的体验。

这款弹窗的设计理念是将用户体验与网站安全完美融合。在保留基本的复制提醒和禁用F12、鼠标右键功能的同时，还增加了对多个常用快捷键的禁用，大大增强了网站的安全性。

此外，这款弹窗在视觉上也有着独特之处。其设计风格简洁大方，颜色搭配得当，给人一种清新脱俗的感觉。同时，弹窗的出现时机和方式也经过精心设计，既不会打扰到用户的正常浏览，又能在关键时刻起到提醒作用。

为了方便大家使用这款弹窗设计，我已将所需的代码打包在本文下方。需要注意的是，这款弹窗完美适配子比主题，其他主题的用户可能需要自行调整以适应自己的网站风格。

效果图

1.复制Ctrl+C提醒


2.禁用鼠标右键菜单提醒

3.禁用F12按键提醒（开发者工具快捷键）

4.禁用Ctrl+Shift+I（开发者工具快捷键）

5.禁用Ctrl+S（保存网页/文件）

6.禁用Ctrl+U（查看网页源代码）

操作教程

1.先引入CDN资源

<!-- 引入VUE -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/packages/theme-chalk/lib/index.css">

2.在任意引用全局js的文件内添加：

1、复制提醒

/* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿！复制成功",
                message:"若要转载请务必保留原文链接！爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})

2、禁用右键菜单并提醒

/* 禁用右键菜单并提醒 */
document.oncontextmenu = function () {
new Vue({
    data:function(){
        this.$notify({
            title:"嘿！没有右键菜单",
            message:"复制请用键盘快捷键",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"warning"
        });
        return{visible:false}
    }
})
return false;
}

3、禁用F12按键并提醒

/* 禁用F12按键并提醒 */
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿！别瞎按",
                    message:"坏孩子！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
};

其他扩展

禁用左键选择

//禁用复制
      document.oncopy = function () {
        return false;
     }

禁用Ctrl+Shift+I

//禁用Ctrl+Shift+I
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }