在现代Web应用开发中，添加水印已成为保护内容版权和隐私的重要手段。Vue.js，作为一款流行的前端框架，为我们提供了多种方法来实现水印的添加。本文将详细介绍如何在Vue项目中添加水印，并确保水印的永久保存不丢失。
一、背景介绍
二、实现方法
1. 使用CSS实现文字水印
文字水印是最简单的水印形式，只需在页面的<body>标签中添加一个背景即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue水印示例</title>
<style>
body {
background-image: repeating-linear-gradient(
90deg,
transparent,
transparent 20px,
#000 20px,
#000 40px
);
background-size: 40px 40px;
}
</style>
</head>
<body>
<div id="app">
<p>这是带有文字水印的页面内容。</p>
</div>
</body>
</html>
2. 使用图片水印
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue图片水印示例</title>
<style>
body {
background-image: url('watermark.png');
background-repeat: no-repeat;
background-position: bottom right;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="app">
<p>这是带有图片水印的页面内容。</p>
</div>
</body>
</html>
3. 使用Vue组件实现动态水印
对于更复杂的水印需求，可以创建一个Vue组件来实现动态水印的添加。
// Watermark.vue
<template>
<div class="watermark">
<img src="watermark.png" alt="Watermark">
</div>
</template>
<script>
export default {
name: 'Watermark',
};
</script>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
</style>
在主组件中引入并使用Watermark组件：
<template>
<div id="app">
<Watermark />
<p>这是带有动态水印的页面内容。</p>
</div>
</template>
<script>
import Watermark from './Watermark.vue';
export default {
name: 'App',
components: {
Watermark,
},
};
</script>