vue通过this.$refs给元素添加水印

js函数

createWaterMark() {
    
    
      var width = this.$refs.element.clientWidth;  // 元素的ref属性;
      var height = 2000;

      var len = width / 80;
      len = len.toFixed(0);
      var hen = height / 80;
      hen = hen.toFixed(0);
      var init_top = 30;
      var dif_heigth = 0;
      if (height < 1000) {
    
    
        dif_heigth = height / 3;
      } else {
    
    
        dif_heigth = height / 8;
      }
      for (var j = 0; j < hen; j++) {
    
    
        for (var i = 0; i < 8; i++) {
    
    
          var div = document.createElement("div");
          var p = document.createElement("p");
          p.innerHTML = this.$store.state.user.name;
          div.setAttribute("class", "watermark");
          div.style.marginLeft = (i * width) / 8 + "px";
          div.style.top = init_top + j * dif_heigth + "px";

          div.appendChild(p);
          this.$refs.element.appendChild(div);
        }
      }

css样式设置

.watermark {
    
    
  opacity: 0.9;
  position: absolute;
  height: 45px;
  width: 160px;
  transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.watermark p {
    
    
  color: #dcdcdc;
}