技术宅

当前位置:首页 > 网站教程 > 代码学习

代码学习

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

时间:10-08 作者:
大家在设定网站提示消息时,非常推荐这个element显示Notification通知功能。
使用方法:
一、引入cdn资源 <!-- 引入VUE --> <script src="https://cdn.jsdelivr.net/npm/vue

大家在设定网站提示消息时,非常推荐这个element显示Notification通知功能。
使用方法:
一、引入cdn资源

 
  1. <!-- 引入VUE -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  3. <!-- 引入组件库 -->
  4. <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
  5. <!-- 引入样式 -->
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">
如果引入上面的导致网站很卡,请引入下面的资源:

 
  1. <!-- 引入VUE -->
  2. <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  3. <!-- 引入组件库 -->
  4. <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
  5. <!-- 引入样式 -->
  6. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
二、在任意引用全局js的文件内添加代码
演示1弹窗效果:

 
  1. /* 复制提醒 */
  2. document.addEventListener("copy",function(e){
  3. new Vue({
  4. data:function(){
  5. this.$notify({
  6. title:"嘿!复制成功",
  7. message:"若要转载请务必保留原文链接!爱你呦~",
  8. position: 'bottom-right',
  9. offset: 50,
  10. showClose: false,
  11. type:"success"
  12. });
  13. return{visible:false}
  14. }
  15. })
  16. })
演示2弹窗效果:

 
  1. /* 禁用F12按键并提醒 */
  2. document.onkeydown = function () {
  3. if (window.event && window.event.keyCode == 123) {
  4. event.keyCode = 0;
  5. event.returnValue = false;
  6. new Vue({
  7. data:function(){
  8. this.$notify({
  9. title:"嘿!别瞎按",
  10. message:"坏孩子!",
  11. position: 'bottom-right',
  12. offset: 50,
  13. showClose: false,
  14. type:"error"
  15. });
  16. return{visible:false}
  17. }
  18. })
  19. return false;
  20. }
演示3弹窗效果:

 
  1. /* 禁用右键菜单并提醒 */
  2. document.oncontextmenu = function () {
  3. new Vue({
  4. data:function(){
  5. this.$notify({
  6. title:"嘿!没有右键菜单",
  7. message:"复制请用键盘快捷键",
  8. position: 'bottom-right',
  9. offset: 50,
  10. showClose: false,
  11. type:"warning"
  12. });
  13. return{visible:false}
  14. }
  15. })
  16. return false;
  17. }
禁用左键选择

 
  1. //禁用左键选择
  2. document.onselectstart = function () {
  3. return false;
  4. }
禁用复制

 
  1. //禁用复制
  2. document.oncopy = function () {
  3. return false;
  4. }
禁用禁用Ctrl+Shift+I

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