From 2f1b7ba706f535fde7d428bba65cf80c5ece05e7 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 10 May 2024 15:33:18 +0800
Subject: [PATCH] refactor(watermark): move to script setup (#3066)

---
 src/config.json                               |   1 +
 .../__snapshots__/watermark.spec.tsx.snap     |   7 -
 .../watermark/__tests__/watermark.spec.tsx    |  22 +-
 src/packages/__VUE/watermark/doc.en-US.md     |  13 +-
 src/packages/__VUE/watermark/doc.md           |  13 +-
 src/packages/__VUE/watermark/doc.taro.md      |  13 +-
 src/packages/__VUE/watermark/index.taro.ts    |  13 +
 src/packages/__VUE/watermark/index.taro.vue   | 254 ------------------
 src/packages/__VUE/watermark/index.ts         |  13 +
 src/packages/__VUE/watermark/index.vue        | 200 --------------
 .../__VUE/watermark/watermark.taro.vue        | 175 ++++++++++++
 src/packages/__VUE/watermark/watermark.vue    | 122 +++++++++
 12 files changed, 373 insertions(+), 473 deletions(-)
 delete mode 100644 src/packages/__VUE/watermark/__tests__/__snapshots__/watermark.spec.tsx.snap
 create mode 100644 src/packages/__VUE/watermark/index.taro.ts
 delete mode 100644 src/packages/__VUE/watermark/index.taro.vue
 create mode 100644 src/packages/__VUE/watermark/index.ts
 delete mode 100644 src/packages/__VUE/watermark/index.vue
 create mode 100644 src/packages/__VUE/watermark/watermark.taro.vue
 create mode 100644 src/packages/__VUE/watermark/watermark.vue

diff --git a/src/config.json b/src/config.json
index c609554457..5faf8cc504 100644
--- a/src/config.json
+++ b/src/config.json
@@ -791,6 +791,7 @@
           "cType": "展示组件",
           "cName": "水印",
           "desc": "页面上添加特定的文字或图案。适用于防止信息盗用。",
+          "setup": true,
           "author": "liukun"
         },
         {
diff --git a/src/packages/__VUE/watermark/__tests__/__snapshots__/watermark.spec.tsx.snap b/src/packages/__VUE/watermark/__tests__/__snapshots__/watermark.spec.tsx.snap
deleted file mode 100644
index 7ab27ba8e8..0000000000
--- a/src/packages/__VUE/watermark/__tests__/__snapshots__/watermark.spec.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`should render watermark 1`] = `
-"<view class="nut-cell" style="">
-  <view class="nut-watermark" style="z-index: 2000; background-size: 144px; background-image: url(" data:image/png;base64,00");"></view>
-</view>"
-`;
diff --git a/src/packages/__VUE/watermark/__tests__/watermark.spec.tsx b/src/packages/__VUE/watermark/__tests__/watermark.spec.tsx
index 7c1a56bdcb..548ce1b67b 100644
--- a/src/packages/__VUE/watermark/__tests__/watermark.spec.tsx
+++ b/src/packages/__VUE/watermark/__tests__/watermark.spec.tsx
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
-import { Watermark, Cell } from '@nutui/nutui'
+import { Watermark } from '@nutui/nutui'
 import { nextTick } from 'vue'
 import 'vitest-canvas-mock'
 
-test('render fullPage props ', async () => {
+test('WaterMark: fullPage = true', async () => {
   const wrapper = mount(() => {
     return <Watermark font-color="#fa2c19" content="nut-ui"></Watermark>
   })
@@ -13,13 +13,17 @@ test('render fullPage props ', async () => {
   expect(wrapper.findAll('.nut-watermark-full-page').length).toBe(1)
 })
 
-test('should render watermark', () => {
+test('WaterMark: fullPage = false, content string[]', () => {
   const wrapper = mount(() => {
-    return (
-      <Cell>
-        <Watermark fullPage={false} fontColor="#fa2c19" content="nut-ui"></Watermark>
-      </Cell>
-    )
+    return <Watermark fullPage={false} fontColor="#fa2c19" content={['nut1', 'nut2']}></Watermark>
   })
-  expect(wrapper.html()).toMatchSnapshot()
+  expect(wrapper.findAll('.nut-watermark-full-page').length).toBe(0)
+})
+
+test('WaterMark: image', () => {
+  const url = 'img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
+  const wrapper = mount(() => {
+    return <Watermark image={url}></Watermark>
+  })
+  expect(wrapper.findAll('.nut-watermark-full-page').length).toBe(1)
 })
diff --git a/src/packages/__VUE/watermark/doc.en-US.md b/src/packages/__VUE/watermark/doc.en-US.md
index 343d292828..bc4f4c9fd0 100644
--- a/src/packages/__VUE/watermark/doc.en-US.md
+++ b/src/packages/__VUE/watermark/doc.en-US.md
@@ -45,7 +45,18 @@ The content attribute is passed into a string array, showing a multi-line waterm
 | gap-x | Horizontal spacing between watermarks | number | `24` |
 | gap-y | Vertical spacing between watermarks | number | `48` |
 | full-page | Overwrite entire page | boolean | `true` |
-| font-family | Watermark text font family | boolean | `true` |
+| font-family | Watermark text font family | string | `PingFang SC` |
+
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  WatermarkProps,
+  WatermarkInstance
+} from '@nutui/nutui'
+```
 
 ## Theming
 
diff --git a/src/packages/__VUE/watermark/doc.md b/src/packages/__VUE/watermark/doc.md
index 4f0d56d87e..8d671abe56 100644
--- a/src/packages/__VUE/watermark/doc.md
+++ b/src/packages/__VUE/watermark/doc.md
@@ -47,7 +47,18 @@ app.use(Watermark)
 | gap-x | 水印之间的水平间距 | number | `24` |
 | gap-y | 水印之间的垂直间距 | number | `48` |
 | full-page | 是否覆盖整个页面 | boolean | `true` |
-| font-family | 水印文字字体 | boolean | `true` |
+| font-family | 水印文字字体 | string | `PingFang SC` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  WatermarkProps,
+  WatermarkInstance
+} from '@nutui/nutui'
+```
 
 ## 主题定制
 
diff --git a/src/packages/__VUE/watermark/doc.taro.md b/src/packages/__VUE/watermark/doc.taro.md
index b66091395d..3bca2ea6ec 100644
--- a/src/packages/__VUE/watermark/doc.taro.md
+++ b/src/packages/__VUE/watermark/doc.taro.md
@@ -47,7 +47,18 @@ app.use(Watermark)
 | gap-x | 水印之间的水平间距 | number | `24` |
 | gap-y | 水印之间的垂直间距 | number | `48` |
 | full-page | 是否覆盖整个页面 | boolean | `true` |
-| font-family | 水印文字字体 | boolean | `true` |
+| font-family | 水印文字字体 | string | `PingFang SC` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  WatermarkProps,
+  WatermarkInstance
+} from '@nutui/nutui-taro'
+```
 
 ## 主题定制
 
diff --git a/src/packages/__VUE/watermark/index.taro.ts b/src/packages/__VUE/watermark/index.taro.ts
new file mode 100644
index 0000000000..b8f3a51173
--- /dev/null
+++ b/src/packages/__VUE/watermark/index.taro.ts
@@ -0,0 +1,13 @@
+import Watermark from './watermark.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Watermark)
+
+export type { WatermarkProps } from './watermark.taro.vue'
+
+export type { } from './types'
+
+export type WatermarkInstance = ComponentPublicInstance & InstanceType<typeof Watermark>
+
+export { Watermark, Watermark as default }
diff --git a/src/packages/__VUE/watermark/index.taro.vue b/src/packages/__VUE/watermark/index.taro.vue
deleted file mode 100644
index fb4d1c1e2b..0000000000
--- a/src/packages/__VUE/watermark/index.taro.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<template>
-  <view
-    :class="classes"
-    :style="{
-      zIndex,
-      backgroundSize: `${gapX + width}px`,
-      backgroundImage: `url('${base64Url}')`
-    }"
-  >
-  </view>
-</template>
-<script lang="ts">
-import { reactive, toRefs, computed, watch } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import Taro from '@tarojs/taro'
-
-const { componentName, create } = createComponent('watermark')
-export default create({
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    gapY: {
-      type: Number,
-      default: 48
-    },
-    gapX: {
-      type: Number,
-      default: 24
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    },
-    width: {
-      type: Number,
-      default: 120
-    },
-    height: {
-      type: Number,
-      default: 64
-    },
-    rotate: {
-      type: Number,
-      default: -22
-    },
-    image: {
-      type: String,
-      default: ''
-    },
-    imageWidth: {
-      type: Number,
-      default: 120
-    },
-    imageHeight: {
-      type: Number,
-      default: 64
-    },
-    content: {
-      type: [String, Array<string>],
-      default: ''
-    },
-    fontColor: {
-      type: String,
-      default: 'rgba(0,0,0,.15)'
-    },
-    fontStyle: {
-      type: String,
-      default: 'normal'
-    },
-    fontFamily: {
-      type: String,
-      default: 'PingFang SC'
-    },
-    fontWeight: {
-      type: String,
-      default: 'normal'
-    },
-    fontSize: {
-      type: [String, Number],
-      default: 14
-    },
-    fullPage: {
-      type: Boolean,
-      default: ''
-    }
-  },
-  emits: ['click'],
-
-  setup(props) {
-    const state = reactive({
-      base64Url: ''
-    })
-    const {
-      zIndex,
-      gapX,
-      gapY,
-      width,
-      height,
-      rotate,
-      image,
-      imageWidth,
-      imageHeight,
-      content,
-      fontStyle,
-      fontWeight,
-      fontColor,
-      fontSize,
-      fontFamily
-    } = props
-
-    const init = async () => {
-      let ratio = 1
-      Taro.getSystemInfo({
-        success(res) {
-          ratio = res.pixelRatio
-        }
-      })
-      const canvasWidth = `${(gapX + width) * ratio}`
-      const canvasHeight = `${(gapY + height) * ratio}`
-      const markWidth = width * ratio
-      const markHeight = height * ratio
-      const canvas: Taro.OffscreenCanvas = Taro.createOffscreenCanvas({
-        type: '2d',
-        width: Number(canvasWidth),
-        height: Number(canvasHeight)
-      })
-      const ctx: any = canvas.getContext('2d')
-
-      if (ctx) {
-        if (image) {
-          // 创建一个图片
-          const img = canvas.createImage() as HTMLImageElement
-          dealWithImage(ctx, img, ratio, ctx.canvas, markWidth, markHeight)
-        } else if (content) {
-          dealWithText(ctx, ratio, ctx.canvas, markWidth, markHeight)
-        }
-      } else {
-        throw new Error('当前环境不支持Canvas')
-      }
-    }
-    const initH5 = () => {
-      const canvas = document.createElement('canvas')
-      const ratio = window.devicePixelRatio
-      const ctx = canvas.getContext('2d')
-      const canvasWidth = `${(gapX + width) * ratio}px`
-      const canvasHeight = `${(gapY + height) * ratio}px`
-      const markWidth = width * ratio
-      const markHeight = height * ratio
-      canvas.setAttribute('width', canvasWidth)
-      canvas.setAttribute('height', canvasHeight)
-
-      if (ctx) {
-        if (image) {
-          const img = new Image()
-          dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight)
-        } else if (content) {
-          dealWithText(ctx, ratio, canvas, markWidth, markHeight)
-        }
-      } else {
-        throw new Error('当前环境不支持Canvas')
-      }
-    }
-    const dealWithImage = (
-      ctx: any,
-      img: HTMLImageElement,
-      ratio: number,
-      canvas: HTMLCanvasElement,
-      markWidth: number,
-      markHeight: number
-    ) => {
-      ctx.translate(markWidth / 2, markHeight / 2)
-      ctx.rotate((Math.PI / 180) * Number(rotate))
-      img.crossOrigin = 'anonymous'
-      img.referrerPolicy = 'no-referrer'
-      img.src = image // 要加载的图片 url, 可以是base64
-      img.onload = () => {
-        ctx.drawImage(
-          img,
-          (-imageWidth * ratio) / 2,
-          (-imageHeight * ratio) / 2,
-          imageWidth * ratio,
-          imageHeight * ratio
-        )
-        ctx.restore()
-        state.base64Url = canvas.toDataURL()
-      }
-    }
-    const dealWithText = (
-      ctx: any,
-      ratio: number,
-      canvas: HTMLCanvasElement,
-      markWidth: number,
-      markHeight: number
-    ) => {
-      ctx.textBaseline = 'middle'
-      ctx.textAlign = 'center'
-      // 文字绕中间旋转
-      ctx.translate(markWidth / 2, markHeight / 2)
-      ctx.rotate((Math.PI / 180) * Number(rotate))
-      const markSize = Number(fontSize) * ratio
-      ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`
-      ctx.fillStyle = fontColor
-      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()
-    }
-    if (Taro.getEnv() === 'WEB') {
-      initH5()
-    } else {
-      init()
-    }
-
-    watch(
-      () => [
-        zIndex,
-        gapX,
-        gapY,
-        width,
-        height,
-        rotate,
-        image,
-        imageWidth,
-        imageHeight,
-        content,
-        fontStyle,
-        fontWeight,
-        fontColor,
-        fontSize,
-        fontFamily
-      ],
-      () => {
-        init()
-      }
-    )
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-full-page`]: props.fullPage
-      }
-    })
-
-    return { ...toRefs(state), classes }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/watermark/index.ts b/src/packages/__VUE/watermark/index.ts
new file mode 100644
index 0000000000..d335738eaf
--- /dev/null
+++ b/src/packages/__VUE/watermark/index.ts
@@ -0,0 +1,13 @@
+import Watermark from './watermark.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Watermark)
+
+export type { WatermarkProps } from './watermark.vue'
+
+export type { } from './types'
+
+export type WatermarkInstance = ComponentPublicInstance & InstanceType<typeof Watermark>
+
+export { Watermark, Watermark as default }
diff --git a/src/packages/__VUE/watermark/index.vue b/src/packages/__VUE/watermark/index.vue
deleted file mode 100644
index 8e99fc0315..0000000000
--- a/src/packages/__VUE/watermark/index.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-  <view
-    :class="classes"
-    :style="{
-      zIndex,
-      backgroundSize: `${gapX + width}px`,
-      backgroundImage: `url('${base64Url}')`
-    }"
-  >
-  </view>
-</template>
-<script lang="ts">
-import { reactive, toRefs, computed, watch } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-const { componentName, create } = createComponent('watermark')
-export default create({
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    gapY: {
-      type: Number,
-      default: 48
-    },
-    gapX: {
-      type: Number,
-      default: 24
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    },
-    width: {
-      type: Number,
-      default: 120
-    },
-    height: {
-      type: Number,
-      default: 64
-    },
-    rotate: {
-      type: Number,
-      default: -22
-    },
-    image: {
-      type: String,
-      default: ''
-    },
-    imageWidth: {
-      type: Number,
-      default: 120
-    },
-    imageHeight: {
-      type: Number,
-      default: 64
-    },
-    content: {
-      type: [String, Array<string>],
-      default: ''
-    },
-    fontColor: {
-      type: String,
-      default: 'rgba(0,0,0,.15)'
-    },
-    fontStyle: {
-      type: String,
-      default: 'normal'
-    },
-    fontFamily: {
-      type: String,
-      default: 'PingFang SC'
-    },
-    fontWeight: {
-      type: String,
-      default: 'normal'
-    },
-    fontSize: {
-      type: [String, Number],
-      default: 14
-    },
-    fullPage: {
-      type: Boolean,
-      default: ''
-    }
-  },
-  emits: ['click'],
-
-  setup(props) {
-    const state = reactive({
-      base64Url: ''
-    })
-    const {
-      zIndex,
-      gapX,
-      gapY,
-      width,
-      height,
-      rotate,
-      image,
-      imageWidth,
-      imageHeight,
-      content,
-      fontStyle,
-      fontWeight,
-      fontColor,
-      fontSize,
-      fontFamily
-    } = props
-    const init = () => {
-      const canvas = document.createElement('canvas')
-      const ratio = window.devicePixelRatio
-      const ctx = canvas.getContext('2d')
-      const canvasWidth = `${(gapX + width) * ratio}px`
-      const canvasHeight = `${(gapY + height) * ratio}px`
-      const markWidth = width * ratio
-      const markHeight = height * ratio
-      canvas.setAttribute('width', canvasWidth)
-      canvas.setAttribute('height', canvasHeight)
-
-      if (ctx) {
-        if (image) {
-          ctx.translate(markWidth / 2, markHeight / 2)
-          ctx.rotate((Math.PI / 180) * Number(rotate))
-
-          const img = new Image()
-          img.crossOrigin = 'anonymous'
-          img.referrerPolicy = 'no-referrer'
-          img.src = image
-          img.onload = () => {
-            ctx.drawImage(
-              img,
-              (-imageWidth * ratio) / 2,
-              (-imageHeight * ratio) / 2,
-              imageWidth * ratio,
-              imageHeight * ratio
-            )
-            ctx.restore()
-            state.base64Url = canvas.toDataURL()
-          }
-        } else if (content) {
-          ctx.textBaseline = 'middle'
-          ctx.textAlign = 'center'
-          // 文字绕中间旋转
-          ctx.translate(markWidth / 2, markHeight / 2)
-          ctx.rotate((Math.PI / 180) * Number(rotate))
-
-          const markSize = Number(fontSize) * ratio
-          ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`
-          ctx.fillStyle = fontColor
-          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()
-        }
-      } else {
-        throw new Error('当前环境不支持Canvas')
-      }
-    }
-    init()
-
-    watch(
-      () => [
-        zIndex,
-        gapX,
-        gapY,
-        width,
-        height,
-        rotate,
-        image,
-        imageWidth,
-        imageHeight,
-        content,
-        fontStyle,
-        fontWeight,
-        fontColor,
-        fontSize,
-        fontFamily
-      ],
-      () => {
-        init()
-      }
-    )
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-full-page`]: props.fullPage
-      }
-    })
-
-    return { ...toRefs(state), classes }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/watermark/watermark.taro.vue b/src/packages/__VUE/watermark/watermark.taro.vue
new file mode 100644
index 0000000000..fad825b6f1
--- /dev/null
+++ b/src/packages/__VUE/watermark/watermark.taro.vue
@@ -0,0 +1,175 @@
+<template>
+  <view :class="classes" :style="{
+    zIndex,
+    backgroundSize: `${gapX + width}px`,
+    backgroundImage: `url('${base64Url}')`
+  }">
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import Taro from '@tarojs/taro'
+
+defineOptions({
+  name: 'NutWatermark'
+})
+
+export type WatermarkProps = Partial<{
+  gapX: number
+  gapY: number
+  zIndex: number
+  width: number
+  height: number
+  rotate: number
+  image: string
+  imageWidth: number
+  imageHeight: number
+  content: string | string[]
+  fontColor: string
+  fontStyle: string
+  fontFamily: string
+  fontWeight: string
+  fontSize: string | number
+  fullPage: boolean
+}>
+
+const props = withDefaults(defineProps<WatermarkProps>(), {
+  gapX: 24,
+  gapY: 48,
+  zIndex: 2000,
+  width: 120,
+  height: 64,
+  rotate: -22,
+  imageWidth: 120,
+  imageHeight: 64,
+  content: '',
+  fontColor: 'rgba(0,0,0,.15)',
+  fontStyle: 'normal',
+  fontFamily: 'PingFang SC',
+  fontWeight: 'normal',
+  fontSize: 14,
+  fullPage: true
+})
+
+const base64Url = ref('')
+
+const classes = computed(() => {
+  const prefixCls = 'nut-watermark'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-full-page`]: props.fullPage
+  }
+})
+
+const init = async () => {
+  let ratio = 1
+  Taro.getSystemInfo({
+    success(res) {
+      ratio = res.pixelRatio
+    }
+  })
+  const canvasWidth = `${(props.gapX + props.width) * ratio}`
+  const canvasHeight = `${(props.gapY + props.height) * ratio}`
+  const markWidth = props.width * ratio
+  const markHeight = props.height * ratio
+  const canvas: Taro.OffscreenCanvas = Taro.createOffscreenCanvas({
+    type: '2d',
+    width: Number(canvasWidth),
+    height: Number(canvasHeight)
+  })
+  const ctx: any = canvas.getContext('2d')
+
+  if (ctx) {
+    if (props.image) {
+      // 创建一个图片
+      const img = canvas.createImage() as HTMLImageElement
+      dealWithImage(ctx, img, ratio, ctx.canvas, markWidth, markHeight)
+    } else if (props.content) {
+      dealWithText(ctx, ratio, ctx.canvas, markWidth, markHeight)
+    }
+  } else {
+    throw new Error('当前环境不支持Canvas')
+  }
+}
+const initH5 = () => {
+  const canvas = document.createElement('canvas')
+  const ratio = window.devicePixelRatio
+  const ctx = canvas.getContext('2d')
+  const canvasWidth = `${(props.gapX + props.width) * ratio}px`
+  const canvasHeight = `${(props.gapY + props.height) * ratio}px`
+  const markWidth = props.width * ratio
+  const markHeight = props.height * ratio
+  canvas.setAttribute('width', canvasWidth)
+  canvas.setAttribute('height', canvasHeight)
+
+  console.log(markWidth, markHeight, canvasWidth, canvasHeight, ratio)
+  if (ctx) {
+    if (props.image) {
+      const img = new Image()
+      dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight)
+    } else if (props.content) {
+      dealWithText(ctx, ratio, canvas, markWidth, markHeight)
+    }
+  } else {
+    throw new Error('当前环境不支持Canvas')
+  }
+}
+const dealWithImage = (
+  ctx: any,
+  img: HTMLImageElement,
+  ratio: number,
+  canvas: HTMLCanvasElement,
+  markWidth: number,
+  markHeight: number
+) => {
+  ctx.translate(markWidth / 2, markHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(props.rotate))
+  img.crossOrigin = 'anonymous'
+  img.referrerPolicy = 'no-referrer'
+  img.src = props.image || '' // 要加载的图片 url, 可以是base64
+  img.onload = () => {
+    ctx.drawImage(
+      img,
+      (-props.imageWidth * ratio) / 2,
+      (-props.imageHeight * ratio) / 2,
+      props.imageWidth * ratio,
+      props.imageHeight * ratio
+    )
+    ctx.restore()
+    base64Url.value = canvas.toDataURL()
+  }
+}
+const dealWithText = (
+  ctx: any,
+  ratio: number,
+  canvas: HTMLCanvasElement,
+  markWidth: number,
+  markHeight: number
+) => {
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+  // 文字绕中间旋转
+  ctx.translate(markWidth / 2, markHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(props.rotate))
+  const markSize = Number(props.fontSize) * ratio
+  ctx.font = `${props.fontStyle} normal ${props.fontWeight} ${markSize}px/${markHeight}px ${props.fontFamily}`
+  ctx.fillStyle = props.fontColor
+  if (Array.isArray(props.content)) {
+    props.content.map((item, index) => {
+      ctx.fillText(item, 0, (index - 1) * markSize)
+    })
+  } else {
+    ctx.fillText(props.content, 0, 0)
+  }
+  ctx.restore()
+  base64Url.value = canvas.toDataURL()
+}
+
+watchEffect(() => {
+  if (Taro.getEnv() === 'WEB') {
+    initH5()
+  } else {
+    init()
+  }
+})
+</script>
diff --git a/src/packages/__VUE/watermark/watermark.vue b/src/packages/__VUE/watermark/watermark.vue
new file mode 100644
index 0000000000..f91fb2378e
--- /dev/null
+++ b/src/packages/__VUE/watermark/watermark.vue
@@ -0,0 +1,122 @@
+<template>
+  <view :class="classes" :style="{
+    zIndex,
+    backgroundSize: `${gapX + width}px`,
+    backgroundImage: `url('${base64Url}')`
+  }">
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+
+defineOptions({
+  name: 'NutWatermark'
+})
+
+export type WatermarkProps = Partial<{
+  gapX: number
+  gapY: number
+  zIndex: number
+  width: number
+  height: number
+  rotate: number
+  image: string
+  imageWidth: number
+  imageHeight: number
+  content: string | string[]
+  fontColor: string
+  fontStyle: string
+  fontFamily: string
+  fontWeight: string
+  fontSize: string | number
+  fullPage: boolean
+}>
+
+const props = withDefaults(defineProps<WatermarkProps>(), {
+  gapX: 24,
+  gapY: 48,
+  zIndex: 2000,
+  width: 120,
+  height: 64,
+  rotate: -22,
+  imageWidth: 120,
+  imageHeight: 64,
+  content: '',
+  fontColor: 'rgba(0,0,0,.15)',
+  fontStyle: 'normal',
+  fontFamily: 'PingFang SC',
+  fontWeight: 'normal',
+  fontSize: 14,
+  fullPage: true
+})
+
+const base64Url = ref('')
+
+const classes = computed(() => {
+  const prefixCls = 'nut-watermark'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-full-page`]: props.fullPage
+  }
+})
+
+const init = () => {
+  const canvas = document.createElement('canvas')
+  const ratio = window.devicePixelRatio
+  const ctx = canvas.getContext('2d')
+  const canvasWidth = `${(props.gapX + props.width) * ratio}px`
+  const canvasHeight = `${(props.gapY + props.height) * ratio}px`
+  const markWidth = props.width * ratio
+  const markHeight = props.height * ratio
+  canvas.setAttribute('width', canvasWidth)
+  canvas.setAttribute('height', canvasHeight)
+
+  if (ctx) {
+    if (props.image) {
+      ctx.translate(markWidth / 2, markHeight / 2)
+      ctx.rotate((Math.PI / 180) * Number(props.rotate))
+
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.referrerPolicy = 'no-referrer'
+      img.src = props.image
+      img.onload = () => {
+        ctx.drawImage(
+          img,
+          (-props.imageWidth * ratio) / 2,
+          (-props.imageHeight * ratio) / 2,
+          props.imageWidth * ratio,
+          props.imageHeight * ratio
+        )
+        ctx.restore()
+        base64Url.value = canvas.toDataURL()
+      }
+    } else if (props.content) {
+      ctx.textBaseline = 'middle'
+      ctx.textAlign = 'center'
+      // 文字绕中间旋转
+      ctx.translate(markWidth / 2, markHeight / 2)
+      ctx.rotate((Math.PI / 180) * Number(props.rotate))
+
+      const markSize = Number(props.fontSize) * ratio
+      ctx.font = `${props.fontStyle} normal ${props.fontWeight} ${markSize}px/${markHeight}px ${props.fontFamily}`
+      ctx.fillStyle = props.fontColor
+      if (Array.isArray(props.content)) {
+        props.content.map((item, index) => {
+          ctx.fillText(item, 0, (index - 1) * markSize)
+        })
+      } else {
+        ctx.fillText(props.content, 0, 0)
+      }
+      ctx.restore()
+      base64Url.value = canvas.toDataURL()
+    }
+  } else {
+    throw new Error('当前环境不支持Canvas')
+  }
+}
+
+watchEffect(() => {
+  init()
+})
+</script>