Vue - 页面添加水印效果

Vue 页面中使用水印效果

  • 水印效果
  • 使用方法

水印效果

  1. 全屏水印
    Vue - 页面添加水印效果_第1张图片

  2. 指定容器水印
    Vue - 页面添加水印效果_第2张图片

使用方法

  1. 项目中新建一个 watermark.js 文件

    let watermark = {};
    
    let setWatermark = (text, sourceBody) => {
      let id =
        Math.random() * 10000 +
        "-" +
        Math.random() * 10000 +
        "/" +
        Math.random() * 10000;
    
      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
      }
    
      let can = document.createElement("canvas");
      can.width = 120; //设置水印之间的左右间距
      can.height = 80; //设置水印之间的上下间距
    
      let cans = can.getContext("2d");
      cans.rotate((-20 * Math.PI) / 180);
      cans.font = "15px Vedana";
      cans.fillStyle = "rgba(0, 0, 0, .5)";
      cans.textAlign = "left";
      cans.textBaseline = "Middle";
      cans.fillText(text, can.width / 20, can.height);
    
      let water_div = document.createElement("div");
      water_div.id = id;
      water_div.className = "watermarkClass";
      water_div.style.pointerEvents = "none";
      water_div.style.background =
        "url(" + can.toDataURL("image/png") + ") left top repeat";
      if (sourceBody) {
        water_div.style.width = "100%";
        water_div.style.height = "100%";
        sourceBody.appendChild(water_div);
      } else {
        water_div.style.top = "3px";
        water_div.style.left = "0px";
        water_div.style.position = "fixed";
        water_div.style.zIndex = "100000";
        water_div.style.width = document.documentElement.clientWidth + "px";
        water_div.style.height = document.documentElement.clientHeight + "px";
        document.body.appendChild(water_div);
      }
    
      return id;
    };
    
    /**
     *  该方法只允许调用一次
     *  @param:
     *  @text == 水印内容
     *  @sourceBody == 水印添加的位置,不传就是body
     * */
    watermark.set = (text, sourceBody) => {
      const domArr = Array.from(document.getElementsByClassName("watermarkClass"));
      for (let i = 0; i < domArr.length; i++) {
        const element = domArr[i];
        // element.parentNode.removeChild(element);
        element.remove();
      }
      if (text == "") {
        return;
      }
      setWatermark(text, sourceBody);
      // let id = setWatermark(text, sourceBody);
      // setInterval(() => {
      //   if (document.getElementById(id) === null) {
      //     id = setWatermark(text, sourceBody);
      //   }
      // }, 2000);
      // window.onresize = () => {
      //   setWatermark(text, sourceBody);
      // };
    };
    
    export default watermark;
    
  2. main.js 中引入 watermark.js

    // 引入水印文件地址
    import watermark from './util/watermark.js'
    Vue.prototype.$watermark = watermark
    
  3. 页面中使用
    this.$watermark.set(text,dom)

    参数 说明 是否必填
    text 水印内容
    dom 水印容器。若不传,则全屏水印,若传,则指定容器。

    (1)全屏水印

    <template>
      <div class="page">
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      mounted(){
        this.$watermark.set("水印")
      },
      beforeDestroy() {
        this.$watermark.set("");
      }
    };
    </script>
    
    <style scoped>
    .page{
      width: 100%;
      height: 100%;
      background-color: skyblue;
    }
    </style>
    

    (2)指定容器水印

    <template>
      <div class="page">
        <div ref="content" style="width: 500px;height: 500px;border: 2px solid red;"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      mounted(){
        this.$watermark.set("水印",this.$refs.content)
      },
      beforeDestroy() {
        this.$watermark.set("",this.$refs.content);
      }
    };
    </script>
    
    <style scoped>
    .page{
      width: 100%;
      height: 100%;
      background-color: skyblue;
    }
    </style>
    

你可能感兴趣的:(#,Vue__插件,依赖的使用,vue.js)