refactor(watermark): add text-align prop

tusen-ai · May 3, 2024 · e0904bd · e0904bd
1 parent ef0e26e
commit e0904bd
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,7 +18,8 @@
 
 ### Features
 
-- `n-watermark` support multi-lines in content
+- `n-watermark` support multi-lines in content.
+- `n-watermark` adds `text-align` prop.
 - `n-qr-code` adds `type` prop, Customize rendering output by setting `type`, providing two options: `canvas` and `svg`.
 - `n-card` 新增 `action`、`content`、`cover`、`footer`、`header-extra` 属性
 - `n-card` 的 `title` 属性支持 render 函数

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,7 +18,8 @@
 
 ### Features
 
-- `n-watermark` 支持多行content
+- `n-watermark` 支持多行文本
+- `n-watermark` 新增 `text-align` 属性
 - `n-qr-code` 新增 `type` 属性，设置 `type` 自定义渲染结果，提供 `canvas` 和 `svg` 两个选项
 - `n-card` 新增 `action`、`content`、`cover`、`footer`、`header-extra` 属性
 - `n-card` 的 `title` 属性支持 render 函数

diff --git a/src/watermark/demos/enUS/index.demo-entry.md b/src/watermark/demos/enUS/index.demo-entry.md
@@ -12,6 +12,8 @@ image.vue
 
 ## API
 
+Supports multiple lines text separated by `\n` since `NEXT_VERSION`.
+
 ### Watermark Props
 
 | Name | Type | Default | Description | Version |
@@ -21,7 +23,7 @@ image.vue
 | debug | `boolean` | `false` | Whether to show debug grid. | 2.25.3 |
 | font-size | `number` | `14` | Font size. | 2.25.3 |
 | font-family | `string` | `undefined` | Font family. | 2.25.3 |
-| font-style | `` 'normal' \| 'italic' \| `oblique ${number}deg`  `` | `normal` | Font style. | 2.25.3 |
+| font-style | ``'normal' \| 'italic' \| `oblique ${number}deg` `` | `normal` | Font style. | 2.25.3 |
 | font-variant | `string` | `''` | Font variant. | 2.25.3 |
 | font-weight | `number` | `400` | Font weight. | 2.25.3 |
 | font-color | `string` | `rgba(128, 128, 128, .3)` | Font color. | 2.25.3 |
@@ -35,6 +37,7 @@ image.vue
 | image-width | `number` | `undefined` | Image width. | 2.25.3 |
 | rotate | `number` | `0` | Rotate degree | 2.25.3 |
 | selectable | `boolean` | `true` | Whether content covered by watermark is selectable. | 2.25.3 |
+| text-align | `'left' \| 'center' \| 'right'` | `'left'` | Text align method when there's multiple lines of text. | NEXT_VERSION |
 | width | `number` | `32` | Width of watermark area. | 2.25.3 |
 | x-gap | `number` | `0` | Horizontal gap. | 2.25.3 |
 | x-offset | `number` | `0` | Horizontal offset. | 2.25.3 |

diff --git a/src/watermark/demos/zhCN/index.demo-entry.md b/src/watermark/demos/zhCN/index.demo-entry.md
@@ -12,6 +12,8 @@ image.vue
 
 ## API
 
+自 `NEXT_VERSION` 支持由 `\n` 分割的多行文本。
+
 ### Watermark Props
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
@@ -21,7 +23,7 @@ image.vue
 | debug | `boolean` | `false` | 是否显示调试信息 | 2.25.3 |
 | font-size | `number` | `14` | 字体大小 | 2.25.3 |
 | font-family | `string` | `undefined` | 字体族 | 2.25.3 |
-| font-style | `` 'normal' \| 'italic' \| `oblique ${number}deg`  `` | `normal` | 字体风格 | 2.25.3 |
+| font-style | ``'normal' \| 'italic' \| `oblique ${number}deg` `` | `normal` | 字体风格 | 2.25.3 |
 | font-variant | `string` | `''` | 字型 | 2.25.3 |
 | font-weight | `number` | `400` | 字重 | 2.25.3 |
 | font-color | `string` | `rgba(128, 128, 128, .3)` | 字体颜色 | 2.25.3 |
@@ -35,6 +37,7 @@ image.vue
 | image-width | `number` | `undefined` | 图片宽度 | 2.25.3 |
 | rotate | `number` | `0` | 旋转角度 | 2.25.3 |
 | selectable | `boolean` | `true` | 被水印覆盖的内容是否可选中 | 2.25.3 |
+| text-align | `'left' \| 'center' \| 'right'` | `'left'` | 在文本有多行的情况下，多行文本的对齐方式 | NEXT_VERSION |
 | width | `number` | `32` | 宽度 | 2.25.3 |
 | x-gap | `number` | `0` | x 轴间隔 | 2.25.3 |
 | x-offset | `number` | `0` | x 轴偏移 | 2.25.3 |

diff --git a/src/watermark/src/Watermark.tsx b/src/watermark/src/Watermark.tsx
@@ -58,9 +58,9 @@ export const watermarkProps = {
     type: Number,
     default: 0
   },
-  align: {
+  textAlign: {
     type: String as PropType<'left' | 'center' | 'right'>,
-    default: 'center'
+    default: 'left'
   },
   image: String,
   imageOpacity: { type: Number, default: 1 },
@@ -203,6 +203,7 @@ export default defineComponent({
           ctx.fillStyle = fontColor
 
           let maxWidth = 0
+          const { textAlign } = props
           content
             .split('\n')
             .map((line) => {
@@ -215,9 +216,9 @@ export default defineComponent({
             })
             .forEach(({ line, width }, index) => {
               const alignOffset =
-                props.align === 'left'
+                textAlign === 'left'
                   ? 0
-                  : props.align === 'center'
+                  : textAlign === 'center'
                     ? (maxWidth - width) / 2
                     : maxWidth - width