vue实现水印功能

在Vue中实现水印功能，可以通过自定义指令来在特定的DOM元素上添加水印。以下是一个简单的Vue自定义指令示例，用于在页面上添加文字水印：

// 在Vue组件中使用
// 假设你已经在Vue实例中注册了该指令
<template>
  <div v-watermark="'我是水印'"></div>
</template>
 
<script>
// 注册自定义指令
export default {
  directives: {
    watermark: {
      inserted(el, binding) {
        const watermarkText = binding.value;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
 
        canvas.width = el.offsetWidth;
        canvas.height = el.offsetHeight;
        ctx.fillStyle = 'rgba(180, 180, 180, 0.3)';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(watermarkText, canvas.width / 2, canvas.height / 2);
 
        const base64 = canvas.toDataURL();
        const watermarkDiv = document.createElement('div');
        watermarkDiv.style.position = 'absolute';
        watermarkDiv.style.top = '0';
        watermarkDiv.style.left = '0';
        watermarkDiv.style.right = '0';
        watermarkDiv.style.bottom = '0';
        watermarkDiv.style.pointerEvents = 'none';
        watermarkDiv.style.background = `url('${base64}') no-repeat center center`;
        watermarkDiv.style.backgroundSize = 'auto 100%';
        el.style.position = 'relative';
        el.appendChild(watermarkDiv);
      }
    }
  }
}
</script>

在这个例子中，我们创建了一个自定义指令v-watermark，它会在绑定的DOM元素上添加一个水印。水印的文字通过指令的绑定值传入，然后在canvas上绘制水印，并将其作为背景图片应用到一个新的div上。这个div覆盖在原始元素上，形成水印效果。