公共方法

FddContract 提供的全局方法，你可以导入后使用

工具函数

• 示例

import { createId } from 'fdd-contract'

// 生成随机字符串 id
const id = createId()

方法名	说明	参数	返回
createId	生成随机字符串 id	—	string
createPromise	创建 Promise，用于在 Promise 外部 resolve、reject	—	{ promise: Promise, resolve: (value?: any) => void, reject: (reason?: any) => void }
awaitTimeout	延时执行函数 Promise	1. callback?: function, ms?: number 2. ms?: number, callback?: function 3. msOrCallback?: function | number,callbackOrMs?: number | function	Promise
normalizeModel	标准化数据，常用于处理后端数据 1. 删除值为 null 和 undefined 的字段 2. 如果 keyMap 中配置了原始字段和新的字段，则更改字段的名称为新的字段 3. 如果 keyMap 中配置了原始字段，新的 字段为空，则删除该字段 4. 如果字段为 is 开头，并且值为数字类型，则转换值为布尔类型	origin: object, keyMap?: { [key: string]: string; }	{ [key: string]: unknown; }

指令

• 示例

<ElInputNumber v-input-number-fix v-model="value" />

import { inputNumberFix } from 'fdd-contract'

export default defineComponent({
  directives: {
    inputNumberFix
  }
})

指令名	说明	使用
inputNumberFix	修复 ElInputNumber 控件 1. 避免必填数字值清除为 undefined，使用最小值或 0 代替 2. 避免 v-model 为 Computed 值时，清除后无法展示默认值	v-input-number-fix

组合函数

useDrag 拖拽控制

用于拖拽时获取鼠标移动距离

• 函数签名

function useDrag<S = unknown, T = unknown>({
  zoom,
  onStart,
  onMoving,
  onEnd
}?: {
  /** 缩放 */
  zoom?: Ref<number>

  /**
   * 拖拽开始
   * @description
   * - 返回初始状态，并作为 `onMoving` 的参数
   * - 如果返回 `false` 则阻止拖拽
   */
  onStart?: (
    /** 拖拽开始事件 */
    e: MouseEvent,
    /** 自定义传输数据 */
    transfer?: T
  ) => S | false

  /** 移动中 */
  onMoving?: (
    /** 拖拽中事件 */
    e: MouseEvent,
    /** 移动数据 */
    move: MoveData,
    /** 初始状态 */
    startState: S
  ) => void

  /** 拖拽结束 */
  onEnd?: (
    /** 拖拽结束事件 */
    e: MouseEvent,
    /** 是否移动过 */
    moved: boolean
  ) => void
}): {
  /** 是否移动中 */
  isMoving: boolean

  /** 拖拽开始，用于绑定节点 `@mousedown.left` 事件 */
  dragStart: (e: MouseEvent, transfer?: T | undefined) => void
}

• 示例 拖拽更新元素位置

<div @mousedown.left="move.dragStart" :style="`transform: translate(${state.x}px, ${state.y}px)`"></div>

import { reactive } from 'vue'
import { useDrag } from 'fdd-contract'

export default defineComponent({
  setup() {
    const state = reactive({ x: 100, y: 100 })

    const move = useDrag({
      onStart(e) {
        const { x, y } = state

        // 记录初始位置
        return { x, y }
      },

      onMoving(e, { x, y }, { x: startX, y: startY }) {
        // 移动时更新位置
        Object.assign(state, {
          x: startX + x,
          y: startY + y
        })
      }
    })

    return {
      state,
      move
    }
  }
})