feat: 新增 hooks

packages/fighting-design/_hooks/index.ts

@@ -26,3 +26,4 @@ export * from './use-form-check'
 export * from './use-transition'
 export * from './use-collapse-animation'
 export * from './use-confirm-box'
+export * from './use-watermark'

packages/fighting-design/_hooks/use-watermark/index.ts

@@ -0,0 +1,39 @@
+import { computed } from 'vue'
+
+export const useWatermark = (prop) => {
+  return computed(() => {
+    /**
+    * 创建一个 canvas
+    *
+    * @see Canvas https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
+    */
+    const canvas: HTMLCanvasElement = document.createElement('canvas')
+
+    /**
+    * 设备像素比率
+    *
+    * @see Window.devicePixelRatio https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
+    */
+    const devicePixeRatio: number = window.devicePixelRatio || 1
+
+    /** 文字大小 */
+    const fontSize: number = prop.fontSize * devicePixeRatio
+
+    const font: string = fontSize + 'px serif'
+    /**
+     * 新建一个二维渲染上下文
+     *
+     * @see HTMLCanvasElement.getContext() https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext
+     * @see CanvasRenderingContext2D https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
+     */
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+
+    ctx.font = font
+
+    const { width } = ctx.measureText(prop.text)
+
+    // const cavasSize = Math.
+
+    return {}
+  })
+}

start/src/App.vue

@@ -1,3 +1,16 @@
-<script lang="ts" setup></script>
+<template>
+  <f-watermark content="机密文件" :height="100" :width="130">
+  </f-watermark>
+</template>
 
-<template></template>
+<style scoped>
+  .f-watermark {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 500px;
+  }
+  .f-card {
+    width: 240px;
+  }
+</style>