网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒-路羽博客-第1张图片

网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒

网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒-路羽博客-第3张图片微信小程序

路羽博客 资源分享

       

说明

大家在设定网站提示消息时,非常推荐这个element显示Notification通知功能。

弹窗效果

网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒-路羽博客-第4张图片

实现步骤

  • 需要引入的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">
  • 复制弹窗提示JS(加到全局js文件内添加):
/* 复制提醒 */
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}
        }
    })
})
  • 禁用右键菜单并提醒(加到全局js文件内添加):
/* 禁用右键菜单并提醒 */
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按键并提醒(加到全局js文件内添加):
/* 禁用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;
}
};

 

 

分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《网站美化-利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒》 发布于2022-9-10

评论

          
       
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

路羽博客验证码