diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
index cc29ea6836..9247054689 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
@@ -19,6 +19,15 @@
+
多行水印
+
+
+
+
+```
+
+:::
+
## API
### Props
@@ -108,7 +138,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
| image-width | Width of image | number | `120` |
| image-height | Height of image | number | `64` |
| z-index | Z-index of the appended watermark element | number | `2000` |
-| content | Watermark text content | string | - |
+| content | Watermark text content | string | string[] | - |
| font-color | Watermark text color | string | `rgba(0, 0, 0, .15)` |
| font-size | Watermark text font size | string \| number | `16` |
| gap-x | Horizontal spacing between watermarks | number | `24` |
diff --git a/src/packages/__VUE/watermark/doc.md b/src/packages/__VUE/watermark/doc.md
index dda9cef1a1..9b729a424d 100644
--- a/src/packages/__VUE/watermark/doc.md
+++ b/src/packages/__VUE/watermark/doc.md
@@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
:::
+### 多行水印
+
+content属性传入string数组,展示的则是多行水印
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+```
+
+:::
+
## API
### Props
@@ -110,7 +140,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
| image-width | 图片宽度 | number | `120` |
| image-height | 图片高度 | number | `64` |
| z-index | 追加的水印元素的 z-index | number | `2000` |
-| content | 水印文字内容 | string | - |
+| content | 水印文字内容 | string | string[] | - |
| font-color | 水印文字颜色 | string | `rgba(0, 0, 0, .15)` |
| font-size | 文字大小 | string \| number | `16` |
| gap-x | 水印之间的水平间距 | number | `24` |
diff --git a/src/packages/__VUE/watermark/doc.taro.md b/src/packages/__VUE/watermark/doc.taro.md
index 0b1d04eb37..fcbaf473a9 100644
--- a/src/packages/__VUE/watermark/doc.taro.md
+++ b/src/packages/__VUE/watermark/doc.taro.md
@@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
:::
+### 多行水印
+
+content属性传入string数组,展示的则是多行水印
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+```
+
+:::
+
## API
### Props
diff --git a/src/packages/__VUE/watermark/index.taro.vue b/src/packages/__VUE/watermark/index.taro.vue
index 0d98a73466..b6af53ef52 100644
--- a/src/packages/__VUE/watermark/index.taro.vue
+++ b/src/packages/__VUE/watermark/index.taro.vue
@@ -58,7 +58,7 @@ export default create({
default: 64
},
content: {
- type: String,
+ type: [String, Array],
default: ''
},
fontColor: {
@@ -202,7 +202,13 @@ export default create({
const markSize = Number(fontSize) * ratio;
ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
ctx.fillStyle = fontColor;
- ctx.fillText(content, 0, 0);
+ if (Array.isArray(content)) {
+ content.map((item, index) => {
+ ctx.fillText(item, 0, (index - 1) * markSize);
+ });
+ } else {
+ ctx.fillText(content, 0, 0);
+ }
ctx.restore();
state.base64Url = canvas.toDataURL();
};
diff --git a/src/packages/__VUE/watermark/index.vue b/src/packages/__VUE/watermark/index.vue
index 13aff800a9..62f012a00e 100644
--- a/src/packages/__VUE/watermark/index.vue
+++ b/src/packages/__VUE/watermark/index.vue
@@ -56,7 +56,7 @@ export default create({
default: 64
},
content: {
- type: String,
+ type: [String, Array],
default: ''
},
fontColor: {
@@ -148,8 +148,13 @@ export default create({
const markSize = Number(fontSize) * ratio;
ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
ctx.fillStyle = fontColor;
-
- ctx.fillText(content, 0, 0);
+ if (Array.isArray(content)) {
+ content.map((item, index) => {
+ ctx.fillText(item, 0, (index - 1) * markSize);
+ });
+ } else {
+ ctx.fillText(content, 0, 0);
+ }
ctx.restore();
state.base64Url = canvas.toDataURL();
}