hy-app 0.4.13 → 0.5.0

package/components/hy-signature/props.ts

@@ -1,29 +1,118 @@
-import type IProps from './typing'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  penColor: '#000',
-  lineWidth: 3,
-  clearText: '清空',
-  revokeText: '撤销',
-  restoreText: '恢复',
-  confirmText: '确认',
-  fileType: 'png',
-  quality: 1,
-  exportScale: 1,
-  disabled: false,
-  height: 1,
-  width: 1,
-  round: '10rpx',
-  backgroundColor: '',
-  disableScroll: true,
-  enableHistory: false,
-  step: 1,
-  undoText: '',
-  redoText: '',
-  pressure: false,
-  minWidth: 2,
-  maxWidth: 6,
-  minSpeed: 1.5,
+const signatureProps = {
+    /** 签名笔颜色 */
+    penColor: {
+        type: String,
+        default: '#000'
+    },
+    /** 签名笔宽度 */
+    lineWidth: {
+        type: Number,
+        default: 3
+    },
+    /** 清空按钮的文本 */
+    clearText: {
+        type: String,
+        default: '清空'
+    },
+    /** 撤回按钮的文本 */
+    revokeText: {
+        type: String,
+        default: '撤销'
+    },
+    /** 恢复按钮的文本 */
+    restoreText: {
+        type: String,
+        default: '恢复'
+    },
+    /** 确认按钮的文本 */
+    confirmText: {
+        type: String,
+        default: '确认'
+    },
+    /** 目标文件的类型 */
+    fileType: {
+        type: String,
+        default: 'png'
+    },
+    /** 签名笔颜色 */
+    quality: {
+        type: Number,
+        default: 1
+    },
+    /** 目标文件的质量 */
+    exportScale: {
+        type: Number,
+        default: 1
+    },
+    /** 是否禁用签名板 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 画布的高度 */
+    height: {
+        type: Number,
+        default: 1
+    },
+    /** 画布的宽度 */
+    width: {
+        type: Number,
+        default: 1
+    },
+    /** 边框圆角 */
+    round: {
+        type: String,
+        default: '10rpx'
+    },
+    /** 画板的背景色 */
+    backgroundColor: String,
+    /** 是否禁用画布滚动 */
+    disableScroll: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否开启历史记录 */
+    enableHistory: {
+        type: Boolean,
+        default: false
+    },
+    /** 撤回和恢复的步长 */
+    step: {
+        type: Number,
+        default: 1
+    },
+    /** 撤回按钮的文本 */
+    undoText: String,
+    /** 恢复按钮的文本 */
+    redoText: String,
+    /** 是否启用压感模式 */
+    pressure: {
+        type: Boolean,
+        default: false
+    },
+    /** 压感模式下笔画最小宽度 */
+    minWidth: {
+        type: Number,
+        default: 2
+    },
+    /** 压感模式下笔画最大宽度 */
+    maxWidth: {
+        type: Number,
+        default: 6
+    },
+    /** 最小速度阈值，影响压感模式下的笔画宽度变化 */
+    minSpeed: {
+        type: Number,
+        default: 1.5
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
 }
 
-export default defaultProps
+export default signatureProps

package/components/hy-signature/typing.d.ts

@@ -1,102 +1,102 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HySignatureProps {
-  /**
-   * @description 签名笔颜色
-   * */
-  penColor?: string
-  /**
-   * @description 签名笔宽度（默认 2 ）
-   * */
-  lineWidth?: number
-  /**
-   * @description 清空按钮的文本
-   * */
-  clearText?: string
-  /**
-   * @description 撤回按钮的文本
-   * */
-  revokeText?: string
-  /**
-   * @description 恢复按钮的文本
-   * */
-  restoreText?: string
-  /**
-   * @description 确认按钮的文本
-   * */
-  confirmText?: string
-  /**
-   * @description 目标文件的类型（默认 png ）
-   * */
-  fileType?: string
-  /**
-   * @description 签名笔颜色
-   * */
-  quality?: number
-  /**
-   * @description 目标文件的质量（默认 1 ）
-   * */
-  exportScale?: number
-  /**
-   * @description 是否禁用签名板（默认 false ）
-   * */
-  disabled?: boolean
-  /**
-   * @description 画布的高度
-   * */
-  height?: number
-  /**
-   * @description 画布的宽度
-   * */
-  width?: number
-  /**
-   * @description 边框圆角
-   * */
-  round?: string | number
-  /**
-   * @description 画板的背景色
-   * */
-  backgroundColor?: string
-  /**
-   * @description 是否禁用画布滚动（默认 true ）
-   * */
-  disableScroll?: boolean
-  /**
-   * @description 是否开启历史记录（默认 false ）
-   * */
-  enableHistory?: boolean
-  /**
-   * @description 撤回和恢复的步长（默认 1 ）
-   * */
-  step?: number
-  /**
-   * @description 撤回按钮的文本（默认 撤销 ）
-   * */
-  undoText?: string
-  /**
-   * @description 恢复按钮的文本（默认 恢复 ）
-   * */
-  redoText?: string
-  /**
-   * @description 是否启用压感模式（默认 false ）
-   * */
-  pressure?: boolean
-  /**
-   * @description 压感模式下笔画最小宽度（默认 2 ）
-   * */
-  minWidth?: number
-  /**
-   * @description 压感模式下笔画最大宽度（默认 6 ）
-   * */
-  maxWidth?: number
-  /**
-   * @description 最小速度阈值，影响压感模式下的笔画宽度变化（默认 1.5 ）
-   * */
-  minSpeed?: number
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 签名笔颜色
+     * */
+    penColor?: string
+    /**
+     * @description 签名笔宽度（默认 2 ）
+     * */
+    lineWidth?: number
+    /**
+     * @description 清空按钮的文本
+     * */
+    clearText?: string
+    /**
+     * @description 撤回按钮的文本
+     * */
+    revokeText?: string
+    /**
+     * @description 恢复按钮的文本
+     * */
+    restoreText?: string
+    /**
+     * @description 确认按钮的文本
+     * */
+    confirmText?: string
+    /**
+     * @description 目标文件的类型（默认 png ）
+     * */
+    fileType?: string
+    /**
+     * @description 签名笔颜色
+     * */
+    quality?: number
+    /**
+     * @description 目标文件的质量（默认 1 ）
+     * */
+    exportScale?: number
+    /**
+     * @description 是否禁用签名板（默认 false ）
+     * */
+    disabled?: boolean
+    /**
+     * @description 画布的高度
+     * */
+    height?: number
+    /**
+     * @description 画布的宽度
+     * */
+    width?: number
+    /**
+     * @description 边框圆角
+     * */
+    round?: string | number
+    /**
+     * @description 画板的背景色
+     * */
+    backgroundColor?: string
+    /**
+     * @description 是否禁用画布滚动（默认 true ）
+     * */
+    disableScroll?: boolean
+    /**
+     * @description 是否开启历史记录（默认 false ）
+     * */
+    enableHistory?: boolean
+    /**
+     * @description 撤回和恢复的步长（默认 1 ）
+     * */
+    step?: number
+    /**
+     * @description 撤回按钮的文本（默认 撤销 ）
+     * */
+    undoText?: string
+    /**
+     * @description 恢复按钮的文本（默认 恢复 ）
+     * */
+    redoText?: string
+    /**
+     * @description 是否启用压感模式（默认 false ）
+     * */
+    pressure?: boolean
+    /**
+     * @description 压感模式下笔画最小宽度（默认 2 ）
+     * */
+    minWidth?: number
+    /**
+     * @description 压感模式下笔画最大宽度（默认 6 ）
+     * */
+    maxWidth?: number
+    /**
+     * @description 最小速度阈值，影响压感模式下的笔画宽度变化（默认 1.5 ）
+     * */
+    minSpeed?: number
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 /**
@@ -107,10 +107,10 @@ export default interface HySignatureProps {
  * @property height - 生成图片的高度
  */
 export type SignatureResult = {
-  tempFilePath: string
-  success: boolean
-  width: number
-  height: number
+    tempFilePath: string
+    success: boolean
+    width: number
+    height: number
 }
 
 /**
@@ -122,11 +122,11 @@ export type SignatureResult = {
  * @property isPressure - 是否为笔锋模式的线条 (可选)
  */
 export interface Line {
-  points: Point[]
-  color: string
-  width: number
-  backgroundColor?: string
-  isPressure?: boolean
+    points: Point[]
+    color: string
+    width: number
+    backgroundColor?: string
+    isPressure?: boolean
 }
 
 /**
@@ -144,17 +144,17 @@ export interface Line {
  * @property isFirstPoint - 是否为线条的第一个点 (可选)
  */
 export interface Point {
-  x: number
-  y: number
-  t: number
-  speed?: number
-  distance?: number
-  lineWidth?: number
-  lastX1?: number
-  lastY1?: number
-  lastX2?: number
-  lastY2?: number
-  isFirstPoint?: boolean
+    x: number
+    y: number
+    t: number
+    speed?: number
+    distance?: number
+    lineWidth?: number
+    lastX1?: number
+    lastY1?: number
+    lastX2?: number
+    lastY2?: number
+    isFirstPoint?: boolean
 }
 
 /**
@@ -166,29 +166,29 @@ export interface Point {
  * @property revoke - 撤销上一步操作
  */
 export type SignatureExpose = {
-  /** 初始化签名板
-   * @param forceUpdate - 是否强制更新
-   */
-  init: (forceUpdate?: boolean) => void
-  /** 点击清除按钮清除签名 */
-  clear: () => void
-  /** 点击确定按钮 */
-  confirm: () => void
-  /* 点击恢复 */
-  restore: () => void
-  /* 点击撤回 */
-  revoke: () => void
+    /** 初始化签名板
+     * @param forceUpdate - 是否强制更新
+     */
+    init: (forceUpdate?: boolean) => void
+    /** 点击清除按钮清除签名 */
+    clear: () => void
+    /** 点击确定按钮 */
+    confirm: () => void
+    /* 点击恢复 */
+    restore: () => void
+    /* 点击撤回 */
+    revoke: () => void
 }
 
 export interface ISignatureEmits {
-  /** 开始签名时触发 */
-  (e: 'start', event: TouchEvent): void
-  /** 结束签名时触发 */
-  (e: 'end', event: TouchEvent): void
-  /** 签名过程中触发 */
-  (e: 'signing', event: TouchEvent): void
-  /** 确认签名时触发 */
-  (e: 'confirm', result: SignatureResult): void
-  /** 清空签名时触发 */
-  (e: 'clear'): void
+    /** 开始签名时触发 */
+    (e: 'start', event: TouchEvent): void
+    /** 结束签名时触发 */
+    (e: 'end', event: TouchEvent): void
+    /** 签名过程中触发 */
+    (e: 'signing', event: TouchEvent): void
+    /** 确认签名时触发 */
+    (e: 'confirm', result: SignatureResult): void
+    /** 清空签名时触发 */
+    (e: 'clear'): void
 }