基于 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>
相关推荐
吃饺子不吃馅34 分钟前
Canvas实现协同电影选座
前端·架构·canvas
前端慢慢其修远1 小时前
fabric.js 中originX originY center设置问题
前端·fabric
im_AMBER1 小时前
React 04
前端·react.js·前端框架·1024程序员节
fhsWar2 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
泷羽Sec-静安3 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端3 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4963 小时前
Web Components简介及如何使用
前端·javascript·html
jump6803 小时前
TS中 unknown 和 any 的区别
前端
无羡仙3 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊4 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器