基于 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>
相关推荐
芒果茶叶7 分钟前
并行SSR,SSR并行加载
前端·javascript·架构
vortex520 分钟前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人23 分钟前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine26 分钟前
JS Entry和 HTML Entry
前端
用户633107761236628 分钟前
Who is a Promise?
前端
比老马还六1 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
xier1234562 小时前
高性能和高灵活度的react表格组件
前端
你打不到我呢2 小时前
nestjs入门:上手数据库与prisma
前端