提供 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>