使用VUE美化你的站内弹窗提示自定义屏蔽按键

效果演示

可以看到有三种不同的提示图标，可以根据自己想要的设置，且样式内的文字也能够自由编辑，下面给大家带来使用教程。

引用VUE资源

资源1.国外服务器推荐使用：

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

资源2.国内服务器推荐使用：

<!-- 引入VUE -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.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/lib/theme-chalk/index.css">

注：上面两种都是同一资源放入即可使用，不要重复性的引用。为何区分两种资源？只是区域位置不同罢了，你应该根据就近原则，服务器在国内则使用资源2。

现在将已经选择好的资源进行复制，粘贴到你Bolg的 header.php 或者 footer.php 文件中；位置可以参考：
e-yuansu.com/wp-content/themes/zibll/header.php

注：引用的js标签，必须存在于php语句之外，才可正常调用，下面是给大家的插入演示。

站内弹窗提示-复制提醒

/* 复制弹窗提示 */
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}
        }
    })
})

站内弹窗提示-禁用右键菜单并提醒

/* 禁用右键菜单并提醒 */
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;
}

站内弹窗提示-禁用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;
}
};

自定义屏蔽按键

//禁用f12demo
function CheckedKey(NextElement){
      var lKeyCode = (navigator.appname=="click")?event.which:window.event.keyCode; 
      if ( lKeyCode == 123 )
      {return false;}
      else{return false;}}

为了放至大家不理解，特此解释，上面这一段代码是禁止f12按键的，如果你需要修改别的按键只需要修改 123 的值即可，下面是键值对照表。