如何用vue封装一个防用户删除的平铺页面的水印组件

2018-12-07 admin

需求

水印.png

  • 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印
  • 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除

效果

  • 如上图
  • body节点下插入水印DOM节点,水印节点覆盖在页面最上层但不影响页面正常操作
  • 在通过js或者用户通过开发者工具删除或修改水印节点时自动复原

原理

  • 通过canvas画出节点需生成水印的文字生成base64图片
  • 生成该水印背景图的div节点插入到body下,通过jsMutationObserver方法监听节点变化,再自动重新生成

生成水印DOM节点

// 生成水印DOM节点    
init () {
      let canvas = document.createElement('canvas')
      canvas.id = 'canvas'
      canvas.width = '200' // 单个水印的宽高
      canvas.height = '130'
      this.maskDiv = document.createElement('div')
      let ctx = canvas.getContext('2d')
      ctx.font = 'normal 18px Microsoft Yahei' // 设置样式
      ctx.fillStyle = 'rgba(112, 113, 114, 0.1)' // 水印字体颜色
      ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
      ctx.fillText(this.inputText, 30, 20)
      let src = canvas.toDataURL('image/png')
      this.maskDiv.style.position = 'fixed'
      this.maskDiv.style.zIndex = '9999'
      this.maskDiv.id = '_waterMark'
      this.maskDiv.style.top = '30px'
      this.maskDiv.style.left = '0'
      this.maskDiv.style.height = '100%'
      this.maskDiv.style.width = '100%'
      this.maskDiv.style.pointerEvents = 'none'
      this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
      // 水印节点插到body下
      document.body.appendChild(this.maskDiv)
    },

监听DOM更改

// 监听更改,更改后执行callback回调函数,会得到一个相关信息的参数对象
    Monitor () {
      let body = document.getElementsByTagName('body')[0]
      let options = {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
        attributeOldValue: true,
        characterDataOldValue: true
      }
      let observer = new MutationObserver(this.callback)
      observer.observe(body, options) // 监听body节点
    },

使用

  • 直接引入项目任何组件中使用即可
  • 组件prop接收三个参数
  props: {
    // 显示的水印文本
    inputText: {
      type: String,
      default: 'waterMark水印'
    },
    // 是否允许通过js或开发者工具等途径修改水印DOM节点(水印的id,attribute属性,节点的删除)
    // true为允许,默认不允许
    inputAllowDele: {
      type: Boolean,
      default: false
    },
    // 是否在组件销毁时去除水印节点(前提是允许用户修改DOM,否则去除后会再次自动生成)
    // true会,默认不会
    inputDestroy: {
      type: Boolean,
      default: false
    }
  }
  • inputText(String):需要生成的水印文本,默认为'waterMark水印'
  • inputAllowDele(Boolean):是否需要允许用户删除水印DOM节点,true为允许,默认不允许
  • inputDestroy(Boolean):是否在组件销毁时去除水印节点,true会,默认不会,(只有在inputAllowDele为ftrue时才能生效)
  • 如果需要修改水印大小,文字,颜色等样式,可直接进入组件中按注释修改

小结

工作写了个相关组件,复用率挺高就封装了下,没有经过严格测试,可当做参考使用 有需要的朋友欢迎下载源码使用相关GitHub代码

原文链接:https://segmentfault.com/a/1190000017297876

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47565.html

文章标题: 如何用vue封装一个防用户删除的平铺页面的水印组件

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部