# useWatermark

给页面的某个区域加上水印。

## Usage

```vue
<template>
  <PageWrapper title="水印示例">
    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Global WaterMark">
      <a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info1')">
        Create Watermark1
      </a-button>
      <a-button type="primary" class="mr-2" @click="setWatermark2('WaterMark Info2')">
        Create Watermark2
      </a-button>
      <a-button color="error" class="mr-2" @click="clear"> Clear Watermark1 </a-button>
      <a-button color="error" class="mr-2" @click="clearAll"> ClearAll </a-button>
      <a-button color="warning" class="mr-2" @click="setWatermark('WaterMark Info New')">
        Update Watermark1
      </a-button>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { useWatermark } from '@eciol/hooks';
  import { CollapseContainer } from '@eciol/share-ui';

  const { setWatermark, clear, clearAll } = useWatermark();
  const { setWatermark: setWatermark2 } = useWatermark();
  onUnmounted(() => {
    clearAll();
  });
</script>
```

## Type Declarations

```ts
interface UseWatermarkRes {
  /**
   * @description 设置水印文字
   */
  setWatermark: (str: string) => void;
  /**
   * @description 清除水印
   */
  clear: () => void;
  /**
   * @description 清除所有水印
   */
  clearAll: () => void;
}
declare function useWatermark(appendEl?: Ref<HTMLElement | null>): UseWatermarkRes;
```