Vue3 useDialog的Dialog、Modal组件、Element Plus或View Design弹窗dialog函数封装，快速集成

Element Plus的弹窗组件或View Design或大部分UI库的弹窗组件函数式封装，快速集成。

文章主要基于Vue 3针对Element Plus的dialog组件封装，其他UI组件库可做部分调整即可集成。

useDialog.ts

/**
 * @author js tang
 */
import { ref } from 'vue'
export function useDialog(params: { title?: string; confirmDisabled?: boolean }) {
  const visible = ref(false)
  const confirming = ref(false)
  const confirmDisabled = ref(params.confirmDisabled)
  const mTitle = ref(params.title)
  const setTitle = (title: string) => {
    mTitle.value = title
  }
  const setConfirmDisabled = (disabled: boolean) => {
    confirmDisabled.value = disabled
  }
  const setConfirming = (loading: boolean) => {
    confirming.value = loading
  }
  const handleConfirm = async (callback: () => any) => {
    if (confirmDisabled.value === true) { return false }
    if (callback && typeof callback === 'function') {
      await callback()
    }
  }
  const handleCancel = () => {
    visible.value = false
  }
  const handleClose = () => {
    visible.value = false
  }
  return {
    visible,
    title: mTitle,
    confirming,
    confirmDisabled,
    handleConfirm,
    handleCancel,
    setTitle,
    setConfirmDisabled,
    setConfirming,
    handleClose,
  }
}

使用示例

useDialog包含的控制属性和事件：

属性控制：

• title // 标题
• visible // 弹窗隐藏显示控制
• confirming // 点击确定（提交）按钮的加载状态
• confirmDisabled // 可选点击确定（提交）按钮的禁用状态

方法控制：

• setTitle // 设置标题
• setConfirmDisabled // 确定（提交）按钮的禁用状态
• setConfirming // 确定（提交）按钮的加载状态
• handleConfirm // 点击提交的函数
• handleCancel // 取消弹窗
• handleClose // 关闭弹窗