在Vue中实现全局水印功能

<template>
  <div id="app">
    <!-- 内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    this.addWatermark('这是全局水印');
  },
  methods: {
    addWatermark(text) {
      const watermark = document.createElement('div');
      watermark.style.position = 'fixed';
      watermark.style.bottom = '10px';
      watermark.style.right = '10px';
      watermark.style.color = 'rgba(0, 0, 0, 0.1)';
      watermark.style.zIndex = '10000';
      watermark.style.pointerEvents = 'none'; // 防止水印本身成为鼠标事件的目标
      watermark.style.userSelect = 'none'; // 防止文字被选中
      watermark.style.fontSize = '20px';
      watermark.textContent = text;
 
      document.body.appendChild(watermark);
    }
  }
};
</script>

这段代码在Vue组件的mounted生命周期钩子中调用了addWatermark方法，该方法负责创建一个div元素作为水印，并将其添加到页面的body中。水印文本可以通过参数text进行自定义。这个简单的例子展示了如何在Vue应用中添加全局水印，并且可以通过CSS自定义水印的样式。