怎么在vue项目里添加水印效果

在Vue项目中添加水印可以使用第三方库 `watermarkjs`。下面是添加水印的步骤：

1. 安装 `watermarkjs`

   npm install watermarkjs --save

2. 在需要添加水印的组件中引入 `watermarkjs`

   import watermark from 'watermarkjs';

3. 在组件的 `mounted` 生命周期中添加水印

   mounted() {
     const options = {
       initText: 'watermark', // 水印内容
       font: '16px Microsoft YaHei', // 字体
       opacity: 0.3, // 透明度
       rotate: -20, // 旋转角度
       color: 'black', // 颜色
       mode: 'fixed', // 模式：fixed（固定） or repeat（平铺）
       width: 200, // 单个水印宽度
       height: 200, // 单个水印高度
       textAlign: 'center', // 文字对齐方式
       textBaseline: 'middle', // 文字基线
     };
     const watermarkInstance = watermark.init(options);
     watermarkInstance.loadImage('watermark.png').then(() => {
       const imgDataUrl = watermarkInstance.getImageDataUrl();
       document.querySelector('.watermark').style.backgroundImage = `url(${imgDataUrl})`;
     });
   }

在上面的代码中，我们使用了 `watermark.init()` 方法初始化水印，并设置了一些选项。然后，我们使用 `watermarkInstance.loadImage()` 方法将水印转换为图片，并将其设置为背景图。最后，我们使用 `watermarkInstance.getImageDataUrl()` 方法获取图片的 data url。

4. 在组件的模板中添加水印容器

   <template>
     <div class="watermark-container">
       <div class="watermark"></div>
       <!-- 正常内容 -->
     </div>
   </template>

在上面的代码中，我们添加了一个名为 `watermark` 的空 div，用于展示水印。然后，我们将正常的内容放在水印容器的外部。

5. 添加样式

   .watermark-container {
     position: relative;
   }
   
   .watermark {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: -1;
     background-repeat: repeat;
   }

在上面的代码中，我们设置了水印容器的 `position` 为 `relative`，并将水印的 `position` 设置为 `absolute`，以便让水印覆盖在正常内容上方。我们还设置了水印的 `z-index` 为 -1，以确保它在正常内容下方。最后，我们将水印的 `background-repeat` 设置为 `repeat`，以便让水印在容器中平铺。

现在，我们已经成功地在 Vue 项目中添加了水印效果。