基于 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>
相关推荐
梓沂1 分钟前
pom.xml中dependencyManagement的作用
xml·java·前端
m0_7482500313 分钟前
前端pdf预览方案
前端·pdf·状态模式
neeef_se14 分钟前
【Linux】WG-Easy:基于 Docker 和 Web 面板的异地组网
linux·前端·docker
stormsha32 分钟前
解决 npm 安装慢的问题:加速 npm 包下载的实用方法
前端·npm·node.js
lulu_063236 分钟前
safari 浏览器输入框 focus时不显示那一闪一闪的图标
前端·css·vue·safari·element-plus
sunshine__sun36 分钟前
自动化测试报错:Exception managing chrome: error decoding response body
java·前端·chrome
m0_7482352443 分钟前
前端:HTML、CSS、JS、Vue
前端·javascript·html
一朵好运莲1 小时前
HBuilderX(uni-app)Vue3路由传参和接收路由参数!!
前端·vue.js·uni-app
编织幻境的妖1 小时前
用户认证系统登录界面
前端·css·css3
tester Jeffky1 小时前
探索HTML5与CSS3的Flex布局:构建现代网页设计的灵活框架
前端·css3·html5