From b21891653f93555278364d68467dee8ca794fb60 Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Thu, 21 Dec 2023 16:07:56 +0800
Subject: [PATCH] chore(watermark): split demo

---
 .../src/exhibition/pages/watermark/basic.vue  |  22 ++++
 .../src/exhibition/pages/watermark/index.vue  |  93 ++++----------
 .../src/exhibition/pages/watermark/multi.vue  |  10 ++
 .../src/exhibition/pages/watermark/part.vue   |  10 ++
 src/packages/__VUE/watermark/demo.vue         |  90 --------------
 src/packages/__VUE/watermark/demo/basic.vue   |  22 ++++
 src/packages/__VUE/watermark/demo/index.vue   |  31 +++++
 src/packages/__VUE/watermark/demo/multi.vue   |  10 ++
 src/packages/__VUE/watermark/demo/part.vue    |  10 ++
 src/packages/__VUE/watermark/doc.en-US.md     | 109 +----------------
 src/packages/__VUE/watermark/doc.md           | 113 ++----------------
 src/packages/__VUE/watermark/doc.taro.md      | 113 ++----------------
 12 files changed, 160 insertions(+), 473 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue
 delete mode 100644 src/packages/__VUE/watermark/demo.vue
 create mode 100644 src/packages/__VUE/watermark/demo/basic.vue
 create mode 100644 src/packages/__VUE/watermark/demo/index.vue
 create mode 100644 src/packages/__VUE/watermark/demo/multi.vue
 create mode 100644 src/packages/__VUE/watermark/demo/part.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue
new file mode 100644
index 0000000000..6a3fcb7517
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-button @click="show = 'text'">Text</nut-button>
+  <span style="margin-right: 10px; display: inline"></span>
+  <nut-button @click="show = 'image'">Image</nut-button>
+  <span style="margin-right: 10px; display: inline"></span>
+  <nut-button @click="show = ''">hidden</nut-button>
+  <nut-watermark v-if="show == 'text'" :z-index="999" content="nut-watermark"></nut-watermark>
+  <nut-watermark
+    v-if="show == 'image'"
+    :image-width="60"
+    :image-height="23"
+    :z-index="999"
+    :image="imgSrc"
+  ></nut-watermark>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const imgSrc = ref(
+  'https://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
+);
+const show = ref<'text' | 'image' | ''>('');
+</script>
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 9247054689..d6a9526b8b 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
@@ -1,72 +1,31 @@
 <template>
-  <Demo class="watermark-demo">
-    <h2>基础用法</h2>
-    <nut-cell class="wrap">
-      <nut-button @click="showTextMark">文字水印</nut-button>
-      <nut-button @click="showImageMark">图片水印</nut-button>
-      <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-      <nut-watermark
-        v-if="flag"
-        class="mark1"
-        :image-width="60"
-        :image-height="23"
-        :z-index="1"
-        :image="imgSrc"
-      ></nut-watermark>
-    </nut-cell>
-    <h2>局部用法</h2>
-    <nut-cell class="wrap wrap2">
-      <img :src="src" alt="" />
-      <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-    </nut-cell>
-    <h2>多行水印</h2>
-    <nut-cell class="wrap wrap2">
-      <nut-watermark
-        :full-page="false"
-        :gap-y="24"
-        font-color="#fa2c19"
-        :content="['nut-ui', 'water-mark']"
-      ></nut-watermark>
-    </nut-cell>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('part') }}</h2>
+    <Part />
+
+    <h2>{{ t('multi') }}</h2>
+    <Multi />
   </Demo>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-const imgSrc = ref(
-  'http://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-);
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style lang="scss">
-.watermark-demo {
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    position: relative;
-    background: #fff;
-    > img {
-      width: 100%;
-      max-height: 100%;
-    }
-    .mark1 {
-      width: 100%;
-      top: 50px;
-    }
-    .nut-button {
-      margin-right: 10px;
-    }
-  }
-  .wrap2 {
-    position: relative;
-    z-index: 2;
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Part from './part.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    part: '局部用法',
+    multi: '多行水印'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    part: 'Part Usage',
+    multi: 'Multiline Watermark'
   }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue
new file mode 100644
index 0000000000..01ae3782b0
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell style="height: 240px">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nutui', 'watermark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue
new file mode 100644
index 0000000000..610afb2561
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell>
+    <img :src="src" alt="" style="width: 100%" />
+    <nut-watermark :full-page="false" font-color="#fa2c19" content="nutui"></nut-watermark>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+</script>
diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
deleted file mode 100644
index af8c5c0523..0000000000
--- a/src/packages/__VUE/watermark/demo.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="demo">
-    <h4>{{ translate('basic') }}</h4>
-    <nut-cell class="wrap">
-      <nut-button @click="showTextMark">{{ translate('btn1') }}</nut-button>
-      <nut-button @click="showImageMark">{{ translate('btn2') }}</nut-button>
-      <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-      <nut-watermark
-        v-if="flag"
-        class="mark1"
-        :image-width="60"
-        :image-height="23"
-        :z-index="1"
-        :image="imgSrc"
-      ></nut-watermark>
-    </nut-cell>
-    <h4>{{ translate('title2') }}</h4>
-    <nut-cell class="wrap wrap2">
-      <img :src="src" alt="" />
-      <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-    </nut-cell>
-    <h4>{{ translate('title3') }}</h4>
-    <nut-cell class="wrap wrap2">
-      <nut-watermark
-        :full-page="false"
-        :gap-y="24"
-        font-color="#fa2c19"
-        :content="['nut-ui', 'water-mark']"
-      ></nut-watermark>
-    </nut-cell>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    title2: '局部用法',
-    title3: '多行水印',
-    btn1: '文字水印',
-    btn2: '图片水印'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    title2: 'Part Usage',
-    title3: 'Multiline Watermark',
-    btn1: 'Text Watermark',
-    btn2: 'Image Watermark'
-  }
-});
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style lang="scss" scoped>
-.demo {
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    position: relative;
-    background: #fff;
-
-    > img {
-      width: 100%;
-    }
-
-    .mark1 {
-      width: 100%;
-      top: 50px;
-    }
-
-    .nut-button {
-      margin-right: 10px;
-    }
-  }
-
-  .wrap2 {
-    position: relative;
-    z-index: 2;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/watermark/demo/basic.vue b/src/packages/__VUE/watermark/demo/basic.vue
new file mode 100644
index 0000000000..fa56e2ef60
--- /dev/null
+++ b/src/packages/__VUE/watermark/demo/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-button @click="show = 'text'">Text</nut-button>
+  <span style="margin-right: 10px"></span>
+  <nut-button @click="show = 'image'">Image</nut-button>
+  <span style="margin-right: 10px"></span>
+  <nut-button @click="show = ''">hidden</nut-button>
+  <nut-watermark v-if="show == 'text'" :z-index="999" content="nut-watermark"></nut-watermark>
+  <nut-watermark
+    v-if="show == 'image'"
+    :image-width="60"
+    :image-height="23"
+    :z-index="999"
+    :image="imgSrc"
+  ></nut-watermark>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const imgSrc = ref(
+  'https://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
+);
+const show = ref<'text' | 'image' | ''>('');
+</script>
diff --git a/src/packages/__VUE/watermark/demo/index.vue b/src/packages/__VUE/watermark/demo/index.vue
new file mode 100644
index 0000000000..909889cf47
--- /dev/null
+++ b/src/packages/__VUE/watermark/demo/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('part') }}</h2>
+    <Part />
+
+    <h2>{{ t('multi') }}</h2>
+    <Multi />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Part from './part.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    part: '局部用法',
+    multi: '多行水印'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    part: 'Part Usage',
+    multi: 'Multiline Watermark'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/watermark/demo/multi.vue b/src/packages/__VUE/watermark/demo/multi.vue
new file mode 100644
index 0000000000..01ae3782b0
--- /dev/null
+++ b/src/packages/__VUE/watermark/demo/multi.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell style="height: 240px">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nutui', 'watermark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
diff --git a/src/packages/__VUE/watermark/demo/part.vue b/src/packages/__VUE/watermark/demo/part.vue
new file mode 100644
index 0000000000..610afb2561
--- /dev/null
+++ b/src/packages/__VUE/watermark/demo/part.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell>
+    <img :src="src" alt="" style="width: 100%" />
+    <nut-watermark :full-page="false" font-color="#fa2c19" content="nutui"></nut-watermark>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+</script>
diff --git a/src/packages/__VUE/watermark/doc.en-US.md b/src/packages/__VUE/watermark/doc.en-US.md
index 0226dfd995..6f140fc99a 100644
--- a/src/packages/__VUE/watermark/doc.en-US.md
+++ b/src/packages/__VUE/watermark/doc.en-US.md
@@ -14,116 +14,17 @@ app.use(Watermark);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-button @click="showTextMark">Text Watermark</nut-button>
-    <nut-button @click="showImageMark">Image Watermark</nut-button>
-    <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-    <nut-watermark
-      v-if="flag"
-      class="mark1"
-      :image-width="60"
-      :image-height="23"
-      :z-index="1"
-      :image="imgSrc"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-.mark1 {
-  width: 100%;
-  top: 50px;
-}
-.nut-button {
-  margin-right: 10px;
-}
-</style>
-```
-
-:::
+> demo: watermark basic
 
 ### Part Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <img :src="src" alt="" />
-    <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-</style>
-```
-
-:::
+> demo: watermark part
 
-### Multiline Watermark
+### Multiline Watermark v4.2.5
 
 The content attribute is passed into a string array, showing a multi-line watermark
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-watermark
-      :full-page="false"
-      :gap-y="24"
-      font-color="#fa2c19"
-      :content="['nut-ui', 'water-mark']"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup></script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-</style>
-```
-
-:::
+> demo: watermark multi
 
 ## API
 
@@ -138,7 +39,7 @@ The content attribute is passed into a string array, showing a multi-line waterm
 | 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 | 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 9b729a424d..d47d0f48a2 100644
--- a/src/packages/__VUE/watermark/doc.md
+++ b/src/packages/__VUE/watermark/doc.md
@@ -16,116 +16,17 @@ app.use(Watermark);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-button @click="showTextMark">文字水印</nut-button>
-    <nut-button @click="showImageMark">图片水印</nut-button>
-    <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-    <nut-watermark
-      v-if="flag"
-      class="mark1"
-      :image-width="60"
-      :image-height="23"
-      :z-index="1"
-      :image="imgSrc"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-.mark1 {
-  width: 100%;
-  top: 50px;
-}
-.nut-button {
-  margin-right: 10px;
-}
-</style>
-```
-
-:::
+> demo: watermark basic
 
 ### 局部用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <img :src="src" alt="" />
-    <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-</style>
-```
+> demo: watermark part
 
-:::
-
-### 多行水印
-
-content属性传入string数组，展示的则是多行水印
-
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-watermark
-      :full-page="false"
-      :gap-y="24"
-      font-color="#fa2c19"
-      :content="['nut-ui', 'water-mark']"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup></script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-</style>
-```
+### 多行水印 v4.2.5
+
+`content` 属性支持传入 `string[]` 类型，展示多行水印
 
-:::
+> demo: watermark multi
 
 ## API
 
@@ -140,7 +41,7 @@ content属性传入string数组，展示的则是多行水印
 | image-width | 图片宽度 | number | `120` |
 | image-height | 图片高度 | number | `64` |
 | z-index | 追加的水印元素的 z-index | number | `2000` |
-| content | 水印文字内容 | string | 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 fcbaf473a9..f5b41790f3 100644
--- a/src/packages/__VUE/watermark/doc.taro.md
+++ b/src/packages/__VUE/watermark/doc.taro.md
@@ -16,116 +16,17 @@ app.use(Watermark);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-button @click="showTextMark">文字水印</nut-button>
-    <nut-button @click="showImageMark">图片水印</nut-button>
-    <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-    <nut-watermark
-      v-if="flag"
-      class="mark1"
-      :image-width="60"
-      :image-height="23"
-      :z-index="1"
-      :image="imgSrc"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-.mark1 {
-  width: 100%;
-  top: 50px;
-}
-.nut-button {
-  margin-right: 10px;
-}
-</style>
-```
-
-:::
+> demo: watermark basic exhibition
 
 ### 局部用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <img :src="src" alt="" />
-    <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-</script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-.wrap > img {
-  width: 100%;
-}
-</style>
-```
+> demo: watermark part exhibition
 
-:::
-
-### 多行水印
-
-content属性传入string数组，展示的则是多行水印
-
-:::demo
-
-```vue
-<template>
-  <nut-cell class="wrap">
-    <nut-watermark
-      :full-page="false"
-      :gap-y="24"
-      font-color="#fa2c19"
-      :content="['nut-ui', 'water-mark']"
-    ></nut-watermark>
-  </nut-cell>
-</template>
-<script setup></script>
-<style>
-.wrap {
-  width: 100%;
-  height: 240px;
-  display: block;
-  background: #fff;
-}
-</style>
-```
+### 多行水印 v4.2.5
+
+`content` 属性支持传入 `string[]` 类型，展示多行水印
 
-:::
+> demo: watermark multi exhibition
 
 ## API
 
@@ -140,7 +41,7 @@ content属性传入string数组，展示的则是多行水印
 | 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` |