npm install watermark-dom

import watermark from 'watermark-dom'

watermark.init({
  watermark_txt: '測(cè)試水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
})

const options = {
  watermark_txt: '測(cè)試水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
}
watermark.load(options)

watermark.remove();

watermark_id: 'wm_div_id',          //水印總體的id
watermark_prefix: 'mask_div_id',    //小水印的id前綴
watermark_txt:"測(cè)試水印",            //水印的內(nèi)容
watermark_x:20,                     //水印起始位置x軸坐標(biāo)
watermark_y:20,                     //水印起始位置Y軸坐標(biāo)
watermark_rows:0,                   //水印行數(shù)
watermark_cols:0,                   //水印列數(shù)
watermark_x_space:100,              //水印x軸間隔
watermark_y_space:50,               //水印y軸間隔
watermark_font:'微軟雅黑',           //水印字體
watermark_color:'black',            //水印字體顏色
watermark_fontsize:'18px',          //水印字體大小
watermark_alpha:0.15,               //水印透明度，要求設(shè)置在大于等于0.005
watermark_width:100,                //水印寬度
watermark_height:100,               //水印長(zhǎng)度
watermark_angle:15,                 //水印傾斜度數(shù)
watermark_parent_width:0,           //水印的總體寬度（默認(rèn)值：body的scrollWidth和clientWidth的較大值）
watermark_parent_height:0,          //水印的總體高度（默認(rèn)值：body的scrollHeight和clientHeight的較大值）
watermark_parent_node:null          //水印插件掛載的父元素element,不輸入則默認(rèn)掛在body上

<template>
  <div style="height:100vh"></div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '測(cè)試水印內(nèi)容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
    }
    watermark.load(options)
  },
}
</script>

<template>
  <div class="box">
    <div class="topBox"></div>
    <div id="watermarkId" class="cenBox"></div>
    <div class="bomBox"></div>
  </div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '測(cè)試水印內(nèi)容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
      watermark_parent_node: 'watermarkId',
    }
    watermark.load(options)
  },
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100vh;
}
.topBox {
  height: 30vh;
  background: cadetblue;
}
.cenBox {
  height: 50vh;
}
.bomBox {
  height: 20vh;
  background: cornflowerblue;
}
</style>