基于 Vue3实现前端生成水印 组件

提供 text 和样式相关属性,支持不同的水印需求。
gap 属性可调整水印的间距,适配不同的显示场景。
在 Watermark 容器中通过插槽添加内容,保持页面结构和样式的灵活性。
监听窗口尺寸变化,自动调整水印的背景样式。
通过 Vue 的 props 和 watch 实现动态响应,可支持新的水印类型(如图片水印)。

新建文件:Watermark.vue

bash 复制代码
<template>
  <div class="watermark-container">
    <slot /> <!-- 插槽内容 -->
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, watch, computed, onUnmounted } from "vue";

export default defineComponent({
  name: "Watermark",
  props: {
    text: {
      type: String,
      default: "Confidential", // 默认水印内容
    },
    fontSize: {
      type: String,
      default: "16px", // 字体大小
    },
    color: {
      type: String,
      default: "rgba(0, 0, 0, 0.1)", // 字体颜色
    },
    angle: {
      type: Number,
      default: -30, // 旋转角度
    },
    gap: {
      type: Array,
      default: () => [150, 100], // 水平和垂直间距
    },
    zIndex: {
      type: Number,
      default: 9999, // 水印层级
    },
  },
  setup(props) {
    const container = ref(null); // 水印容器引用

    // 生成水印样式
    const createWatermark = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      const [gapX, gapY] = props.gap;
      canvas.width = gapX; // 设置水平方向间距
      canvas.height = gapY; // 设置垂直方向间距

      // 绘制水印
      ctx.font = `${props.fontSize} Arial`;
      ctx.fillStyle = props.color;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.rotate((props.angle * Math.PI) / 180); // 旋转文字
      ctx.fillText(props.text, gapX / 2, gapY / 2);

      // 设置容器的背景样式
      if (container.value) {
        container.value.style.backgroundImage = `url(${canvas.toDataURL("image/png")})`;
        container.value.style.backgroundRepeat = "repeat";
        container.value.style.zIndex = props.zIndex;
      }
    };

    onMounted(() => {
      createWatermark(); // 初始化水印
      window.addEventListener("resize", createWatermark); // 窗口变化时重新绘制
    });

    onUnmounted(() => {
      window.removeEventListener("resize", createWatermark); // 移除事件监听
    });

    watch(() => props, createWatermark, { deep: true }); // 响应式监听 Props 变化

    return { container };
  },
});
</script>

<style scoped>
.watermark-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

使用示例:

bash 复制代码
<template>
  <Watermark
    text="Team Watermark"
    :fontSize="'20px'"
    :color="'rgba(0, 0, 255, 0.1)'"
    :angle="-45"
    :gap="[200, 150]"
    :zIndex="10000"
  >
    <div class="content">
      <h1>水印示例</h1>
      <p>这是一个带有水印功能的内容区域。</p>
    </div>
  </Watermark>
</template>

<script>
import Watermark from "./components/Watermark.vue";

export default {
  components: {
    Watermark,
  },
};
</script>

<style>
.content {
  padding: 20px;
  background-color: #fff;
}
</style>
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript