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

前言

element弹窗效果挺好看的,就分享给大家了!

效果演示

演示弹窗1 演示弹窗2 演示弹窗3

食用方法

一、引入cdn资源

<!-- 引入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">

如果引入上面的导致网站很卡,请引入下面的资源:

<!-- 引入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">

二、在任意引用全局js的文件内添加代码

演示弹窗1 的效果:

演示弹窗2 的效果:

演示弹窗3 的效果:

扩展

禁用左键选择

禁用复制

禁用禁用Ctrl+Shift+I

© 版权声明
THE END
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=270198dipw4ko
点赞10赞赏 分享
评论 共4条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像1
    • 头像路人1