新增前端vue

web-vue/packages/test/views/demo/watermark.vue

@@ -0,0 +1,26 @@
+<template>
+  <PageWrapper title="页面水印示例">
+    <a-button type="primary" class="mr-2" @click="setWatermark('Hello JeeSite !')"> 创建水印 1 </a-button>
+    <a-button color="error" class="mr-2" @click="clear"> 清理水印 1 </a-button>
+    <a-button type="primary" class="mr-2" @click="setWatermark2('https://jeesite.com')"> 创建水印 2 </a-button>
+    <a-button color="error" class="mr-2" @click="clearAll"> 清理全部 </a-button>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { onUnmounted, ref } from 'vue';
+  import { useWatermark } from '@jeesite/core/hooks/web/useWatermark';
+  import { PageWrapper } from '@jeesite/core/components/Page';
+
+  const app = ref(document.body);
+
+  const { setWatermark, clear, clearAll } = useWatermark();
+  const { setWatermark: setWatermark2 } = useWatermark(app, {
+    fontColor: 'red',
+    fontSize: 12,
+    rotate: 30,
+  });
+
+  onUnmounted(() => {
+    clearAll();
+  });
+</script>