refactor: ♻️ 重构signature组件 (#853)

2025-12-06 17:18:40 +08:00 · 2025-01-18 00:01:35 +08:00 · 2025-01-18 00:01:35 +08:00 · 21fbfbb49b
commit 21fbfbb49b
parent c0d48b25c1
25 changed files with 428 additions and 224 deletions
--- a/docs/component/signature.md
+++ b/docs/component/signature.md
@ -1,8 +1,15 @@
-# Signature 组件
-`Signature`组件是一个用于生成手写签名的 Vue 组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮
+# Signature 签名 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
+
+用于签名场景，基于 Canvas 实现的签名组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮。
+
+:::tip 提醒
+如果遇到导出图片不清晰，可以将`exportScale`设置为`2`以上。
+:::
+
 ## 基础用法
+
 ```html
-<wd-signature @confirm="confirm" />
+<wd-signature @submit="confirm" @clear="clear" />
 <wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />
 ```

@ -12,36 +19,60 @@ const img = ref({
  height: 0,
  src: ''
 })
-function confirm(result: FileType) {
+
+function confirm(result: SignatureResult) {
  img.value.src = result.tempFilePath
  img.value.height = result.height
  img.value.width = result.width
 }
 ```
-##  自定义颜色
-`pen-color`设置签名笔的颜色，默认为`黑色`
+
+## 自定义画笔颜色
+
+`pen-color`设置签名笔的颜色，默认为`黑色`。
+
 ```html
 <wd-signature pen-color="red" />
 ```

+## 自定义画笔宽度

-## 自定义宽度
 `line-width`设置签名笔的宽度，默认为`2`。
+
 ```html
 <wd-signature :line-width="6" />
 ```

+## 自定义背景色
+
+`background-color`设置画板的背景色，无默认值。
+
+```html
+<wd-signature background-color="lightgray" />
+```
+
+## 禁用滚动
+
+`disable-scroll`设置是否禁用画布滚动，默认为`true`。
+
+```html
+<wd-signature :disable-scroll="false" />
+```
+
 ## 自定义按钮
-通过`footer`插槽可以自定义按钮
+
+通过`footer`插槽可以自定义按钮。
+
 ```html
 <wd-signature :disabled="disabled">
  <template #footer="{ clear, confirm }">
    <wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
    <wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
-    <wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
+    <wd-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</wd-button>
  </template>
 </wd-signature>
 ```
+
 ```typescript
 const disabled = ref(true)

@ -49,39 +80,45 @@ function changeDisabled() {
  disabled.value = false
 }
 ```
+
 ## Attributes
-| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
-|-----|------|-----|-------|-------|--------|
-| penColor | 签名笔颜色  | String | -- |  #000000  | --   |
-| lineWidth | 签名笔宽度 | Number   | -- | 2  | --   |
-| height | 画布的高度 | Number   | -- | 200 | --   |
-| width | 画布的宽度 | Number   | -- | 300  | --   |
-| clearText | 清空按钮的文本 | String	   |-- | 清空  | --   |
-| confirmText | 确认按钮的文本 | String   | -- | 确认  | --  |
-| fileType | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0)  | String   | -- | png  | --   |
-| quality |  目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | Number   | -- | 1  |--   |
-| exportScale | 导出图片的缩放比例 | Number   | -- | 1  |--   |
-| disabled | 是否禁用签名板 | Boolean   | -- | false  | --   |
+
+| 参数            | 说明                                                                 | 类型    | 可选值 | 默认值   | 最低版本 |
+|-----------------|----------------------------------------------------------------------|---------|--------|----------|----------|
+| penColor        | 签名笔颜色                                                           | String  | --     | #000000  | --       |
+| lineWidth       | 签名笔宽度                                                           | Number  | --     | 2        | --       |
+| height          | 画布的高度                                                           | Number  | --     | 200      | --       |
+| width           | 画布的宽度                                                           | Number  | --     | 300      | --       |
+| clearText       | 清空按钮的文本                                                       | String  | --     | 清空     | --       |
+| confirmText     | 确认按钮的文本                                                       | String  | --     | 确认     | --       |
+| fileType        | 目标文件的类型，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | String  | --     | png      | --       |
+| quality         | 图片的质量，取值范围为 `(0, 1]`，不在范围内时当作1.0处理，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | Number  | --  | 1    | --    |
+| exportScale     | 导出图片的缩放比例                                                   | Number  | --     | 1        | --       |
+| disabled        | 是否禁用签名板                                                       | Boolean | --     | false    | --       |
+| backgroundColor | 画板的背景色                                                         | String  | --     | --       | --       |
+| disableScroll   | 是否禁用画布滚动                                                     | Boolean | --     | true     | --       |

 ## Slot

-| name    | 说明                     |参数 | 最低版本 |
-| ------- | ------------------------ |--- | -------- |
-| footer | 自定义footer | `{ clear, confirm }`     |-       |
+| name   | 说明           | 参数                  | 最低版本 |
+|--------|----------------|-----------------------|----------|
+| footer | 自定义footer   | `{ clear, confirm }`  | -        |

 ## Events

-| 事件名称 | 说明 | 参数 | 最低版本 |
-|---------|-----|-----|---------|
-| confirm | 点击确认按钮时触发 |  `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
-| clear | 点击清空按钮时触发 | - | - |
-| touchstart | 按下时触发 |  `event`| - |
-| touchend | 按下结束时触发 |  `event` | - |
+| 事件名称  | 说明               | 参数                                      | 最低版本 |
+|-----------|--------------------|-------------------------------------------|----------|
+| start     | 开始签名时触发     | -                                         | -        |
+| end       | 结束签名时触发     | -                                         | -        |
+| signing   | 签名过程中触发     | `event`                                   | -        |
+| confirm   | 点击确定按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | -        |
+| clear     | 点击清空按钮时触发 | -                                         | -        |

 ## Methods
+
 对外暴露函数

-| 事件名称 | 说明 | 参数 | 最低版本 |
-|--------|------|-----|---------|
-| confirm | 点击确认按钮时触发 |  `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
-| clear | 点击清空按钮时触发 | - | - |
+| 事件名称  | 说明               | 参数                                      | 最低版本 |
+|-----------|--------------------|-------------------------------------------|----------|
+| confirm   | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | -        |
+| clear     | 点击清空按钮时触发 | -                                         | -        |
--- a/src/pages/signature/Index.vue
+++ b/src/pages/signature/Index.vue
@ -1,24 +1,19 @@
-<!--
- * @Author: 810505339
- * @Date: 2025-01-10 15:49:26
- * @LastEditors: 810505339
- * @LastEditTime: 2025-01-11 22:10:22
- * @FilePath: \wot-design-uni\src\pages\signature\Index.vue
- * 记得注释
-->
 <template>
  <page-wraper>
    <demo-block title="基础用法">
-      <wd-signature @confirm="confirm" />
-      <wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />
+      <wd-signature @confirm="confirm" @clear="clear" :export-scale="2" />
+      <wd-img v-if="img.tempFilePath" mode="widthFix" width="100%" :src="img.tempFilePath" />
    </demo-block>
-    <demo-block title="自定义颜色">
+    <demo-block title="自定义画笔颜色">
      <wd-signature pen-color="red" />
    </demo-block>
-    <demo-block title="自定义宽度">
+    <demo-block title="自定义画笔宽度">
      <wd-signature :line-width="6" />
    </demo-block>
-    <demo-block title="自定义按钮">
+    <demo-block title="自定义背景颜色">
+      <wd-signature background-color="lightgray" />
+    </demo-block>
+    <demo-block title="自定义插槽">
      <wd-signature :disabled="disabled">
        <template #footer="{ clear, confirm }">
          <wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
@ -29,20 +24,23 @@
    </demo-block>
  </page-wraper>
 </template>
+
 <script lang="ts" setup>
-import type { FileType } from '@/uni_modules/wot-design-uni/components/wd-signature/types'
+import type { SignatureResult } from '@/uni_modules/wot-design-uni/components/wd-signature/types'
 import { ref } from 'vue'
-const img = ref({
-  width: 0,
-  height: 0,
-  src: ''
-})
+
+const img = ref<Partial<SignatureResult>>({})
+
 const disabled = ref(true)
-function confirm(result: FileType) {
-  img.value.src = result.tempFilePath
-  img.value.height = result.height
-  img.value.width = result.width
+
+function confirm(result: SignatureResult) {
+  img.value = result
 }
+
+function clear() {
+  img.value = {}
+}
+
 function changeDisabled() {
  disabled.value = false
 }
--- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@ -958,3 +958,8 @@ $-floating-panel-content-bg: var(--wot-floating-panel-content-bg, $-color-white)
 $-signature-bg: var(--wot-signature-bg, $-color-white) !default; // 背景色
 $-signature-radius: var(--wot-signature-radius, 4px) !default; // 圆角
 $-signature-border: var(--wot-signature-border, 1px solid $-color-gray-5) !default; // 边框圆角
+$-signature-footer-margin-top: var(--wot-signature-footer-margin-top, 8px) !default; // 底部按钮上边距
+$-signature-button-margin-left: var(--wot-signature-button-margin-left, 8px) !default; // 底部按钮左边距
+
+
+
--- a/src/uni_modules/wot-design-uni/components/common/util.ts
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@ -237,9 +237,10 @@ export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo
 * @param selector 节点选择器 #id,.class
 * @param all 是否返回所有 selector 对应的节点
 * @param scope 作用域（支付宝小程序无效）
+ * @param useFields 是否使用 fields 方法获取节点信息
 * @returns 节点信息或节点信息数组
 */
-export function getRect<T extends boolean>(selector: string, all: T, scope?: any): Promise<RectResultType<T>> {
+export function getRect<T extends boolean>(selector: string, all: T, scope?: any, useFields?: boolean): Promise<RectResultType<T>> {
  return new Promise<RectResultType<T>>((resolve, reject) => {
    let query: UniNamespace.SelectorQuery | null = null
    if (scope) {
@ -247,17 +248,24 @@ export function getRect<T extends boolean>(selector: string, all: T, scope?: any
    } else {
      query = uni.createSelectorQuery()
    }
-    query[all ? 'selectAll' : 'select'](selector)
-      .boundingClientRect((rect) => {
-        if (all && isArray(rect) && rect.length > 0) {
-          resolve(rect as RectResultType<T>)
-        } else if (!all && rect) {
-          resolve(rect as RectResultType<T>)
-        } else {
-          reject(new Error('No nodes found'))
-        }
-      })
-      .exec()
+
+    const method = all ? 'selectAll' : 'select'
+
+    const callback = (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+      if (all && isArray(rect) && rect.length > 0) {
+        resolve(rect as RectResultType<T>)
+      } else if (!all && rect) {
+        resolve(rect as RectResultType<T>)
+      } else {
+        reject(new Error('No nodes found'))
+      }
+    }
+
+    if (useFields) {
+      query[method](selector).fields({ size: true, node: true }, callback).exec()
+    } else {
+      query[method](selector).boundingClientRect(callback).exec()
+    }
  })
 }

@ -459,7 +467,7 @@ export const pause = (ms: number = 1000 / 30) => {
 * @returns 深拷贝后的对象副本
 */
 export function deepClone<T>(obj: T, cache: Map<any, any> = new Map()): T {
-  // 如果对象为 null 或者不是对象类型，则直接返回该对象
+  // 如果对象为 null 或或者不是对象类型，则直接返回该对象
  if (obj === null || typeof obj !== 'object') {
    return obj
  }
--- a/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
+++ b/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
@ -1,10 +1,10 @@
 /*
 * @Author: weisheng
 * @Date: 2024-01-25 23:06:48
- * @LastEditTime: 2024-01-26 14:00:48
+ * @LastEditTime: 2025-01-16 21:30:14
 * @LastEditors: weisheng
 * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\composables\useTranslate.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
 * 记得注释
 */
 import { camelCase, getPropByPath, isFunction } from '../common/util'
--- a/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
@ -540,32 +540,28 @@ function handleConfirm() {
 */
 function canvasToImage() {
  const { fileType, quality, exportScale } = props
-  try {
-    uni.canvasToTempFilePath(
-      {
-        width: cutWidth.value * exportScale,
-        height: Math.round(cutHeight.value * exportScale),
-        destWidth: cutWidth.value * exportScale,
-        destHeight: Math.round(cutHeight.value * exportScale),
-        fileType,
-        quality,
-        canvasId: 'wd-img-cropper-canvas',
-        success: (res: any) => {
-          const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
-          // #ifdef MP-DINGTALK
-          result.tempFilePath = res.filePath
-          // #endif
-          emit('confirm', result)
-        },
-        complete: () => {
-          emit('update:modelValue', false)
-        }
+  uni.canvasToTempFilePath(
+    {
+      width: cutWidth.value * exportScale,
+      height: Math.round(cutHeight.value * exportScale),
+      destWidth: cutWidth.value * exportScale,
+      destHeight: Math.round(cutHeight.value * exportScale),
+      fileType,
+      quality,
+      canvasId: 'wd-img-cropper-canvas',
+      success: (res: any) => {
+        const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = res.filePath
+        // #endif
+        emit('confirm', result)
      },
-      proxy
-    )
-  } catch (error) {
-    console.log(error)
-  }
+      complete: () => {
+        emit('update:modelValue', false)
+      }
+    },
+    proxy
+  )
 }

 /**
--- a/src/uni_modules/wot-design-uni/components/wd-signature/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/index.scss
@ -2,22 +2,29 @@
@import '../common/abstracts/mixin';

@include b(signature) {
-  @include e(context){
+  @include e(content) {
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
    background: $-signature-bg;
-    border-radius:$-signature-radius;
-    border:$-signature-border;
+    border-radius: $-signature-radius;
+    border: $-signature-border;
  }
-  @include e(footer)
-  {
-    margin-top: 4px;
+
+  @include e(content-canvas) {
+    width: 100%;
+  }
+
+  @include e(footer) {
+    margin-top: $-signature-footer-margin-top;
    justify-content: flex-end;
    display: flex;
-    & .wd-button + .wd-button{
-      margin-left: 4px;
+
+    :deep(){
+      .wd-button{
+        margin-left: $-signature-button-margin-left;
+      }
    }
  }
 }
--- a/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
@ -1,65 +1,115 @@
 /*
 * @Author: 810505339
 * @Date: 2025-01-10 20:03:57
- * @LastEditors: 810505339
- * @LastEditTime: 2025-01-11 23:03:44
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\types.ts
+ * @LastEditors: weisheng
+ * @LastEditTime: 2025-01-17 16:43:19
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
 * 记得注释
 */
-import type { ExtractPropTypes, Prop, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+import { baseProps, numericProp } from '../common/props'

 export const signatureProps = {
  ...baseProps,
+  /**
+   * 签名笔颜色
+   * 类型：string
+   * 默认值：#000
+   */
  penColor: {
    type: String,
    default: '#000'
  },
+  /**
+   * 签名笔宽度
+   * 类型：number
+   * 默认值：3
+   */
  lineWidth: {
    type: Number,
    default: 3
  },
-  height: {
-    type: Number,
-    default: 200
-  },
-  width: {
-    type: Number,
-    default: 300
-  },
-  clearText: {
-    type: String,
-    default: '清空'
-  },
-  confirmText: {
-    type: String,
-    default: '确认'
-  },
+  /**
+   * 清空按钮的文本
+   * 类型：string
+   */
+  clearText: String,
+  /**
+   * 确认按钮的文本
+   * 类型：string
+   */
+  confirmText: String,
+  /**
+   * 目标文件的类型
+   * 类型：string
+   * 默认值：png
+   */
  fileType: {
    type: String,
    default: 'png'
  },
+  /**
+   * 目标文件的质量
+   * 类型：number
+   * 默认值：1
+   */
  quality: {
    type: Number,
    default: 1
  },
+  /**
+   * 导出图片的缩放比例
+   * 类型：number
+   * 默认值：1
+   */
  exportScale: {
    type: Number,
    default: 1
  },
+  /**
+   * 是否禁用签名板
+   * 类型：boolean
+   * 默认值：false
+   */
  disabled: {
    type: Boolean,
    default: false
+  },
+  /**
+   * 画布的高度
+   * 类型：number
+   */
+  height: numericProp,
+  /**
+   * 画布的宽度
+   * 类型：number
+   */
+  width: numericProp,
+  /**
+   * 画板的背景色
+   * 类型：string
+   */
+  backgroundColor: String,
+  /**
+   * 是否禁用画布滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  disableScroll: {
+    type: Boolean,
+    default: true
  }
 }
-export type FileType = {
+
+export type SignatureResult = {
  tempFilePath: string
+  success: boolean
  width: number
  height: number
 }
+
 export type SignatureExpose = {
  /** 点击清除按钮清除签名 */
  clear: () => void
  /** 点击确定按钮 */
-  confirm: (result: FileType) => void
+  confirm: (result: SignatureResult) => void
 }
--- a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
@ -1,19 +1,14 @@
-<!--
- * @Author: 810505339
- * @Date: 2025-01-10 15:41:12
- * @LastEditors: 810505339
- * @LastEditTime: 2025-01-11 22:53:54
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\wd-signature.vue
- * 记得注释
-->
 <template>
  <view class="wd-signature">
-    <view class="wd-signature__context">
+    <view class="wd-signature__content" :style="canvasStyle">
      <!-- #ifdef MP-WEIXIN -->
      <canvas
-        :style="canvasStyle"
+        class="wd-signature__content-canvas"
+        :width="canvasState.canvasWidth"
+        :height="canvasState.canvasHeight"
        :canvas-id="canvasId"
        :id="canvasId"
+        :disable-scroll="disableScroll"
        @touchstart="startDrawing"
        @touchend="stopDrawing"
        @touchmove="draw"
@ -22,11 +17,12 @@
      <!-- #endif  -->
      <!-- #ifndef MP-WEIXIN -->
      <canvas
-        :height="height"
-        :width="width"
-        :style="canvasStyle"
+        class="wd-signature__content-canvas"
        :canvas-id="canvasId"
+        :width="canvasState.canvasWidth"
+        :height="canvasState.canvasHeight"
        :id="canvasId"
+        :disable-scroll="disableScroll"
        @touchstart="startDrawing"
        @touchend="stopDrawing"
        @touchmove="draw"
@ -35,8 +31,8 @@
    </view>
    <view class="wd-signature__footer">
      <slot name="footer" :clear="clear" :confirm="confirmSignature">
-        <wd-button size="small" plain @click="clear">{{ clearText }}</wd-button>
-        <wd-button size="small" @click="confirmSignature">{{ confirmText }}</wd-button>
+        <wd-button size="small" plain @click="clear">{{ clearText || translate('clearText') }}</wd-button>
+        <wd-button size="small" @click="confirmSignature">{{ confirmText || translate('confirmText') }}</wd-button>
      </slot>
    </view>
  </view>
@ -53,31 +49,32 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, defineExpose } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
-import { signatureProps, type SignatureExpose } from './types'
+import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
+import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { signatureProps, type SignatureExpose, type SignatureResult } from './types'
+import { useTranslate } from '../composables/useTranslate'
 // #ifdef MP-WEIXIN
 import { canvas2dAdapter } from '../common/canvasHelper'
 // #endif
+
 const props = defineProps(signatureProps)
-const emit = defineEmits(['clear', 'confirm', 'touchstart', 'touchend'])
+const emit = defineEmits(['start', 'end', 'signing', 'confirm', 'clear'])
+const { translate } = useTranslate('signature')
 const { proxy } = getCurrentInstance() as any
 const canvasId = ref<string>(`signature${uuid()}`) // canvas 组件的唯一标识符
 let canvas: null = null //canvas对象 微信小程序生成图片必须传入
-let ctx: UniApp.CanvasContext | null = null // canvas上下文
 const drawing = ref<boolean>(false) // 是否正在绘制
 const pixelRatio = ref<number>(1) // 像素比
-const canvasDom = ref({
-  w: 0,
-  h: 0
+const canvasState = reactive({
+  canvasWidth: 0,
+  canvasHeight: 0,
+  ctx: null as UniApp.CanvasContext | null // canvas上下文
 })
+
 watch(
  () => props.penColor,
  () => {
    setLine()
-  },
-  {
-    immediate: true
  }
 )

@ -85,43 +82,63 @@ watch(
  () => props.lineWidth,
  () => {
    setLine()
-  },
-  {
-    immediate: true
  }
 )

 const canvasStyle = computed(() => {
-  const style = {
-    height: addUnit(props.height),
-    width: addUnit(props.width)
+  const style: CSSProperties = {}
+  if (isDef(props.width)) {
+    style.width = addUnit(props.width)
  }
+
+  if (isDef(props.height)) {
+    style.height = addUnit(props.height)
+  }
+
  return `${objToStyle(style)};`
 })

+const disableScroll = computed(() => props.disableScroll)
+
 /* 开始画线 */
 const startDrawing = (e: TouchEvent) => {
+  e.preventDefault()
  drawing.value = true
  setLine()
-  emit('touchstart', e)
+  emit('start', e)
  draw(e)
 }
+
 /* 结束画线 */
 const stopDrawing = (e: TouchEvent) => {
+  e.preventDefault()
  drawing.value = false
+  const { ctx } = canvasState
  if (ctx) ctx.beginPath()
-  emit('touchend', e)
+  emit('end', e)
 }
+
 // 初始化 canvas
 const initCanvas = () => {
-  getContext()
+  getContext().then(() => {
+    const { ctx } = canvasState
+    if (ctx && isDef(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+      ctx.draw()
+    }
+  })
 }

 // 清空 canvas
 const clear = () => {
-  const { w, h } = canvasDom.value
+  const { canvasWidth, canvasHeight, ctx } = canvasState
  if (ctx) {
-    ctx.clearRect(0, 0, w, h)
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+    if (isDef(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+    }
    ctx.draw()
  }
  emit('clear')
@ -134,59 +151,77 @@ const confirmSignature = () => {

 //canvas划线
 const draw = (e: any) => {
-  if (!drawing.value) return
-  if (props.disabled) return
-  if (!ctx) return
+  e.preventDefault()
+  const { ctx } = canvasState
+
+  if (!drawing.value || props.disabled || !ctx) return
  const { x, y } = e.touches[0]
  ctx.lineTo(x, y)
  ctx.stroke()
  ctx.draw(true) //是否记住上一次画线
  ctx.moveTo(x, y)
+  emit('signing', e)
 }

 onMounted(() => {
  initCanvas()
 })
+
 onBeforeMount(() => {
+  // #ifdef MP
  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+  // #endif
 })
+
 /**
 * 获取canvas上下文
 */
 function getContext() {
  return new Promise<UniApp.CanvasContext>((resolve) => {
+    const { ctx } = canvasState
+
    if (ctx) {
      return resolve(ctx)
    }
-    uni
-      .createSelectorQuery()
-      .in(proxy)
-      .select(`#${canvasId.value}`)
-      .node((res) => {
-        if (res && res.node) {
-          const canvasInstance = res.node
-          // #ifndef MP-WEIXIN
-          ctx = uni.createCanvasContext(canvasId.value, proxy)
-          // #endif
-          // #ifdef MP-WEIXIN
-          ctx = canvas2dAdapter(canvasInstance.getContext('2d') as CanvasRenderingContext2D)
-          canvasInstance.width = props.width * pixelRatio.value
-          canvasInstance.height = props.height * pixelRatio.value
-          ctx.scale(pixelRatio.value, pixelRatio.value)
-          // #endif
-          canvas = canvasInstance
-          canvasDom.value = {
-            w: canvasInstance.width,
-            h: canvasInstance.height
-          }
-          resolve(ctx)
-        }
-      })
-      .exec()
+    // #ifndef MP-WEIXIN
+    getRect(`#${canvasId.value}`, false, proxy).then((canvasRect) => {
+      setcanvasState(canvasRect.width!, canvasRect.height!)
+      canvasState.ctx = uni.createCanvasContext(canvasId.value, proxy)
+      if (canvasState.ctx) {
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+      }
+      resolve(canvasState.ctx)
+    })
+    // #endif
+    // #ifdef MP-WEIXIN
+
+    getRect(`#${canvasId.value}`, false, proxy, true).then((canvasRect: any) => {
+      if (canvasRect && canvasRect.node) {
+        const canvasInstance = canvasRect.node
+        canvasState.ctx = canvas2dAdapter(canvasInstance.getContext('2d') as CanvasRenderingContext2D)
+        canvasInstance.width = canvasRect.width * pixelRatio.value
+        canvasInstance.height = canvasRect.height * pixelRatio.value
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+        canvas = canvasInstance
+        setcanvasState(canvasRect.width, canvasRect.height)
+        resolve(canvasState.ctx)
+      }
+    })
+    // #endif
  })
 }
+
+/**
+ * 设置 canvasState
+ */
+function setcanvasState(width: number, height: number) {
+  canvasState.canvasHeight = height * pixelRatio.value
+  canvasState.canvasWidth = width * pixelRatio.value
+}
+
 /* 设置线段 */
 function setLine() {
+  const { ctx } = canvasState
  if (ctx) {
    ctx.setLineWidth(props.lineWidth)
    ctx.setStrokeStyle(props.penColor)
@ -194,39 +229,47 @@ function setLine() {
    ctx.setLineCap('round')
  }
 }
+
 /**
 *  canvas 绘制图片输出成文件类型
 */
 function canvasToImage() {
  const { fileType, quality, exportScale } = props
-  const { w, h } = canvasDom.value
-  try {
-    uni.canvasToTempFilePath(
-      {
-        width: w * exportScale,
-        height: h * exportScale,
-        destWidth: w * exportScale,
-        destHeight: h * exportScale,
-        fileType,
-        quality,
-        canvasId: canvasId.value,
-        canvas: canvas,
-        success: (res: any) => {
-          const result = { tempFilePath: res.tempFilePath, width: (w * exportScale) / pixelRatio.value, height: (h * exportScale) / pixelRatio.value }
-          // #ifdef MP-DINGTALK
-          result.tempFilePath = res.filePath
-          // #endif
-          emit('confirm', result)
-        },
-        fail: (error) => {
-          console.error(error)
+  const { canvasWidth, canvasHeight } = canvasState
+  uni.canvasToTempFilePath(
+    {
+      width: canvasWidth * exportScale,
+      height: canvasHeight * exportScale,
+      destWidth: canvasWidth * exportScale,
+      destHeight: canvasHeight * exportScale,
+      fileType,
+      quality,
+      canvasId: canvasId.value,
+      canvas: canvas,
+      success: (res) => {
+        const result: SignatureResult = {
+          tempFilePath: res.tempFilePath,
+          width: (canvasWidth * exportScale) / pixelRatio.value,
+          height: (canvasHeight * exportScale) / pixelRatio.value,
+          success: true
        }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = (res as any).filePath
+        // #endif
+        emit('confirm', result)
      },
-      proxy
-    )
-  } catch (error) {
-    console.error(error)
-  }
+      fail: () => {
+        const result: SignatureResult = {
+          tempFilePath: '',
+          width: (canvasWidth * exportScale) / pixelRatio.value,
+          height: (canvasHeight * exportScale) / pixelRatio.value,
+          success: false
+        }
+        emit('confirm', result)
+      }
+    },
+    proxy
+  )
 }

 defineExpose<SignatureExpose>({
--- a/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: weisheng
 * @Date: 2023-04-05 21:32:56
- * @LastEditTime: 2024-04-01 20:40:34
+ * @LastEditTime: 2025-01-16 21:43:47
 * @LastEditors: weisheng
 * @Description: 水印组件
 * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
@ -31,7 +31,7 @@ export default {
 </script>

 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
 import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
 import { watermarkProps } from './types'

@ -68,7 +68,7 @@ const rootClass = computed(() => {
 * 水印样式
 */
 const rootStyle = computed(() => {
-  const style: Record<string, string | number> = {
+  const style: CSSProperties = {
    opacity: props.opacity,
    backgroundSize: addUnit(props.width + props.gutterX)
  }
--- a/src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'فهرس'
+  },
+  signature: {
+    confirmText: 'تأكيد',
+    clearText: 'مسح'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/de-DE.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/de-DE.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'Index'
+  },
+  signature: {
+    confirmText: 'Bestätigen',
+    clearText: 'Löschen'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/en-US.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/en-US.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'index'
+  },
+  signature: {
+    confirmText: 'OK',
+    clearText: 'Clear'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/es-ES.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/es-ES.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'Índice'
+  },
+  signature: {
+    confirmText: 'Confirmar',
+    clearText: 'Limpiar'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'Indice'
+  },
+  signature: {
+    confirmText: 'Signer',
+    clearText: 'Effacer'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: '索引'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: 'クリア'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: '인덱스'
+  },
+  signature: {
+    confirmText: '확인',
+    clearText: '지우기'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'Número'
+  },
+  signature: {
+    confirmText: 'Concluir',
+    clearText: 'Limpar'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: '№'
+  },
+  signature: {
+    confirmText: 'Подтвердить',
+    clearText: 'Очистить'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'หมายเลขซีเรียล'
+  },
+  signature: {
+    confirmText: 'ยืนยัน',
+    clearText: 'ล้าง'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: 'Sıra No'
+  },
+  signature: {
+    confirmText: 'İmzala',
+    clearText: 'Temizle'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
@ -64,5 +64,9 @@ export default {
  textarea: { placeholder: 'Vui lòng nhập...' },
  tableCol: {
    indexLabel: 'Số sê-ri'
+  },
+  signature: {
+    confirmText: 'Xác nhận',
+    clearText: 'Xóa'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
@ -123,5 +123,9 @@ export default {
  },
  tableCol: {
    indexLabel: '序号'
+  },
+  signature: {
+    confirmText: '确认',
+    clearText: '清空'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
@ -57,5 +57,9 @@ export default {
  textarea: { placeholder: '請輸入...' },
  tableCol: {
    indexLabel: '序號'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: '清空'
  }
 }
--- a/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
@ -57,5 +57,9 @@ export default {
  textarea: { placeholder: '請輸入...' },
  tableCol: {
    indexLabel: '序號'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: '清空'
  }
 }