vue3 v3-easyui messager消息框封装

2024年1月7日21:38:30

• 关于messager消息框封装，官方文档漏了很多配置（例如tip），由于无法通过某个属性控制显隐，所以不能封装成组件的形式在模板使用，而且也不符合消息框的使用设想。例如封装好后在网络请求调用，就不能是组件形式，所以通过类似hook函数封装。封装如下：

/** messager.ts */
export type typeName = 'tip' | 'alert' | 'confirm' | 'prompt'
export type options = {
  title?: string
  msg?: string
  icon?: string
  ok?: string
  cancel?: string
  borderType?: 'thin' | 'thick' | 'none'
  showHeader?: boolean
  buttons?: boolean | null | undefined
  modal?: boolean
  result?: Function
  timeout?: number
}

export default function messager(
  type: typeName,
  {
    title = '',
    msg = '',
    icon = 'info',
    ok = '确定',
    cancel = '取消',
    borderType = 'thick',
    showHeader = true,
    buttons = true,
    modal = false,
    result = (r: any) => {
      if (r) alert('ok: ' + r)
    },
    timeout = 3000
  }: options
) {
  const $messager = window?.$messager
  if (!$messager) return null
  $messager.ok = ok
  $messager.cancel = cancel

  switch (type) {
    case 'confirm':
    case 'prompt':
      $messager[type]({
        title,
        msg,
        icon,
        borderType,
        showHeader,
        buttons,
        modal,
        result
      })
      break
    case 'alert':
      $messager[type]({
        title,
        msg,
        icon,
        borderType,
        showHeader,
        buttons,
        modal
      })
      break
    default:
      $messager[type]({
        title,
        msg,
        icon,
        borderType,
        showHeader,
        modal,
        timeout
      })
  }
}

• 使用形式：

/** 父组件 */
import messager from '@/composables/messager'

messager('tip', { msg: 'Loading...', borderType: 'none' })