create-base-teek-theme/dist/template/docs/articles/使用指南/10.hooks/07.useWatermark.md

``` npm create base-teek-theme@latest my-first-blog ```

---
date: 2025-04-03 23:53:35
title: useWatermark
permalink: /pages/7ad229
tags:
  - vue Hooks
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南
  - hooks

---







## 说明

设置防篡改水印

## 参数

```typescript
type waterMarkOptions = {
    // 自定义水印的文字大小
    fontSize?: number;
    // 自定义水印的文字颜色
    fontColor?: string;
    // 自定义水印的文字字体
    fontFamily?: string;
    // 自定义水印的文字对齐方式
    textAlign?: CanvasTextAlign;
    // 自定义水印的文字基线
    textBaseline?: CanvasTextBaseline;
    // 自定义水印的文字倾斜角度
    rotate?: number;
};
```

## 使用

- 默认添加到`document.body`，如果添加到其他元素要保证添加水印的元素（此例中为 `#app`）的 `position` 属性设为 `relative` 或者 `absolute`，这样水印才能正确定位。

- 可按需调整 `waterMarkOptions` 对象里的配置选项，例如 `fontSize`、`fontColor`、`rotate` 等。

```vue
<template>
  <div id="app">
    <h1>水印示例</h1>
    <button @click="addWatermark">添加水印</button>
    <button @click="removeWatermark">移除水印</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useWatermark } from 'liyao-vue-common'; 

const appRef = ref<HTMLElement | null>(null);

const { setWatermark, clear } = useWatermark(appRef, {
  // waterMarkOptions...
  fontSize: 16,
  fontColor: 'rgba(0, 0, 0, 0.2)',
  rotate: 30
});

const addWatermark = () => {
  setWatermark('自定义水印文本');
};

const removeWatermark = () => {
  clear();
};
</script>

<style scoped>
#app {
  position: relative;
  padding: 20px;
}
</style>
```