From 6a159d35190074905e86ce9b7d1363b07f757e54 Mon Sep 17 00:00:00 2001 From: JarvisArt <1120886013@qq.com> Date: Sun, 4 Dec 2022 19:59:56 +0800 Subject: [PATCH] feat: Watermark calculates the width and height of content by default * docs: update docs * docs: update demo * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 1286 ++++++++++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 784 +++++++++- .../__snapshots__/index.test.tsx.snap | 13 +- components/watermark/demo/custom.md | 7 + components/watermark/demo/custom.tsx | 167 +++ components/watermark/demo/z-index.md | 7 - components/watermark/demo/z-index.tsx | 44 - components/watermark/index.en-US.md | 6 +- components/watermark/index.tsx | 69 +- components/watermark/index.zh-CN.md | 6 +- 10 files changed, 2245 insertions(+), 144 deletions(-) create mode 100644 components/watermark/demo/custom.md create mode 100644 components/watermark/demo/custom.tsx delete mode 100644 components/watermark/demo/z-index.md delete mode 100644 components/watermark/demo/z-index.tsx diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap index d397a83e1ed3..e5dc9abb7590 100644 --- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -10,17 +10,1266 @@ exports[`renders ./components/watermark/demo/basic.tsx extend context correctly `; -exports[`renders ./components/watermark/demo/image.tsx extend context correctly 1`] = ` +exports[`renders ./components/watermark/demo/custom.tsx extend context correctly 1`] = `
Basic
Multi-line watermark
Image watermark
-High priority
+Custom configuration
## API
@@ -28,8 +28,8 @@ Add specific text or patterns to the page.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
-| width | The width of the watermark | number | 120 | |
-| height | The height of the watermark | number | 64 | |
+| width | The width of the watermark, the default value of `content` is its own width | number | 120 | |
+| height | The height of the watermark, the default value of `content` is its own height | number | 64 | |
| rotate | When the watermark is drawn, the rotation Angle, unit `°` | number | -22 | |
| zIndex | The z-index of the appended watermark element | number | 9 | |
| image | Image source, it is recommended to export 2x or 3x image, high priority | string | - | |
diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx
index 50ea2dba240d..d6f65fb6df5b 100644
--- a/components/watermark/index.tsx
+++ b/components/watermark/index.tsx
@@ -1,6 +1,8 @@
import React, { useEffect, useMemo, useRef } from 'react';
import useMutationObserver from './useMutationObserver';
+const FontGap = 3;
+
const getStyleStr = (style: Record基本
多行水印
图片水印
-高优先级
+自定义配置
## API
@@ -29,8 +29,8 @@ demo:
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
-| width | 水印的宽度 | number | 120 | |
-| height | 水印的高度 | number | 64 | |
+| width | 水印的宽度,`content` 的默认值为自身的宽度 | number | 120 | |
+| height | 水印的高度,`content` 的默认值为自身的高度 | number | 64 | |
| rotate | 水印绘制时,旋转的角度,单位 `°` | number | -22 | |
| zIndex | 追加的水印元素的 z-index | number | 9 | |
| image | 图片源,建议导出 2 倍或 3 倍图,优先级高 | string | - | |