网页水印

<template>
  <div class="watermark-container">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
// 水印配置项
let watermarkText = ''; // 水印文字内容，可替换为你需要的文本
const fontSize = '16px Arial'; // 水印字体大小，修改此值可改变文字大小
const color = 'rgba(0, 0, 0, 0.15)'; // 水印颜色及透明度
const rotate = -25; // 水印旋转角度（度数）
const xGap = 200; // 水印横向间距
const yGap = 150; // 水印纵向间距

const watermarkRef = ref(null);

// 创建水印函数
const createWatermark = () => {
  // 销毁已存在的水印
  destroyWatermark();

  // 创建水印容器元素
  const watermark = document.createElement('div');
  watermark.setAttribute('class', 'watermark');
  watermark.style.cssText = `
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
    background-repeat: repeat;
  `;

  // 创建canvas用于绘制水印
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置canvas尺寸，根据间距计算，确保能覆盖全屏重复显示
  canvas.width = xGap * 2;
  canvas.height = yGap * 2;

  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.font = fontSize; // 这里设置字体大小
  ctx.fillStyle = color;

  // 旋转水印
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate((rotate * Math.PI) / 180);

  // 绘制水印文字
  ctx.fillText(watermarkText, 0, 0);

  // 将canvas内容转为背景图，设置给水印容器
  watermark.style.backgroundImage = `url('${canvas.toDataURL()}')`;

  // 将水印容器添加到页面body中
  document.body.appendChild(watermark);
  watermarkRef.value = watermark;
};

// 销毁水印函数
const destroyWatermark = () => {
  const watermark = watermarkRef.value;
  if (watermark) {
    watermark.remove();
    watermarkRef.value = null;
  }
};

// 组件挂载时创建水印
onMounted(() => {
  createWatermark();
});

// 组件卸载时销毁水印
onUnmounted(() => {
  destroyWatermark();
});

// 监听 userId 变化
watch(
  () => userStore.nickname,
  (newValue, oldValue) => {
    watermarkText=newValue;
    createWatermark();
  },
  { immediate: true } // 立即执行一次回调
);
</script>

<style scoped>
/* 水印容器样式 */
.watermark-container {
  position: relative;
  z-index: 1;
}

/* 水印样式 */
.watermark {
  pointer-events: none;
}
</style>