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(); }