vue2-s-cli/template/src/util/watermark.js

脚手架

function formatMarkDate(format = "YY-MM-DD hh:mm:ss") {
  var date = new Date();

  var year = date.getFullYear(),
    month = date.getMonth() + 1, //月份是从0开始的
    day = date.getDate(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds();
  var preArr = Array.apply(null, Array(10)).map(function(elem, index) {
    return "0" + index;
  }); //开个长度为10的数组 格式为 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"]

  var newTime = format
    .replace(/YY/g, year)
    .replace(/MM/g, preArr[month] || month)
    .replace(/DD/g, preArr[day] || day)
    .replace(/hh/g, preArr[hour] || hour)
    .replace(/mm/g, preArr[min] || min)
    .replace(/ss/g, preArr[sec] || sec);

  return newTime;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}

const watermark = {
  setMark: function(val) {
    let cookieVal = getCookie("xymh-username-ip") || val;
    if (cookieVal == "") {
      return;
    }
    let waterBox = document.createElement("div");
    waterBox.id = "watermark-box";
    waterBox.style.cssText = [
      "position: fixed",
      "top: 0",
      "bottom: 0",
      "left: 0",
      "z-index: 9999",
      "right: 0",
      "font-size: 12px",
      "display: flex",
      "flex-wrap: wrap",
      "overflow: hidden",
      "user-select: none",
      "pointer-events: none",
      "opacity: 0.13"
    ].join(";");
    document.body.appendChild(waterBox);

    let nameIp = decodeURIComponent(cookieVal);
    let markText = nameIp + "/" + formatMarkDate();
    this.doWaterMark(300, 100, markText);
  },
  doWaterMark: function(width, height, content) {
    var box = document.getElementById("watermark-box");
    var boxWidth = box.clientWidth,
      boxHeight = box.clientHeight;

    for (var i = 0; i < Math.floor(boxHeight / height); i++) {
      for (var j = 0; j < Math.floor(boxWidth / width); j++) {
        let next = document.createElement("div");
        next.setAttribute("class", "watermark");
        next.style.width = width + "px";
        next.style.height = height + "px";
        next.style.height = height + "px";
        next.style.transform = "skewY(-18deg)";
        next.style.display = "flex";
        next.style.alignItems = "center";
        next.style.justifyContent = "center";
        next.innerText = content;
        box.appendChild(next);
      }
    }
  }
};
export default watermark;