Sud-Web Docs

Appearance

useDialogOut ​

useDialogOut 是一个通用的弹窗控制 Hook，用于统一管理弹窗的显示状态、操作模式（新增 / 编辑 / 查看）以及强类型数据。

适用于后台管理系统中常见的表单弹窗、详情弹窗等场景。

特性 ​

  • 支持 add / edit / check 三种模式
  • 模式切换自动控制禁用状态
  • 支持泛型，row 为强类型数据
  • 提供完整的弹窗控制方法
  • 解耦 UI 与业务逻辑回调

引入方式 ​

ts
import useDialogOut from '@sud-web/vue-hooks/useDialogOut'

基础使用示例 ​

ts
interface User {
  id: number
  name: string
}

const dialog = reactive(useDialogOut<User>({
  confirmed(data) {
    console.log('confirm:', data)
  },
  closed() {
    console.log('closed')
  }
}))

返回值说明 ​

ts
const {
  visible,
  row,
  disabled,
  mode,
  onClose,
  onConfirm,
  open,
  hide,
  add,
  edit,
  check
} = reactive(useDialogOut())
字段类型说明
visibleboolean控制弹窗显示与隐藏
rowT当前操作的数据
disabledboolean是否禁用（查看模式为 true）
mode'add', 'edit', 'check'当前弹窗模式

模式说明 ​

模式用途disabled
add新增false
edit编辑false
check查看true

当 mode 切换为 check 时，disabled 会自动变为 true。

常用操作 ​

新增数据 ​

ts
dialog.add()
  • 将模式设为 add
  • 重置 row
  • 打开弹窗

编辑数据 ​

ts
dialog.edit(data)
  • 将模式设为 edit
  • 设置当前数据
  • 打开弹窗

查看数据 ​

ts
dialog.check(data)
  • 将模式设为 check
  • 设置当前数据
  • 表单进入只读状态

弹窗关闭与确认 ​

关闭弹窗 ​

ts
dialog.onClose()

调用后会关闭弹窗，并触发 closed 回调（如果存在）。

确认提交 ​

ts
dialog.onConfirm(dialog.row)

调用后会关闭弹窗，并触发 confirmed 回调（如果存在）。

在模板中使用示例 ​

vue
<template>
  <el-dialog v-model="dialog.visible" title="用户信息">
    <el-input
      v-model="dialog.row.name"
      :disabled="dialog.disabled"
    />

    <template #footer>
      <el-button @click="dialog.onClose()">取消</el-button>
      <el-button
        type="primary"
        :disabled="dialog.disabled"
        @click="dialog.onConfirm(dialog.row)"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

回调说明 ​

confirmed ​

ts
confirmed?: (data?: T) => void

在调用 onConfirm 时触发，通常用于提交表单或保存数据。

closed ​

ts
closed?: (data?: T) => void

在调用 onClose 时触发，通常用于清理状态或通知父组件。

注意事项 ​

  • row 是一个响应式引用，请避免直接替换引用本身
  • check 模式下应配合 disabled 控制表单只读
  • 建议在 CRUD 弹窗中统一使用，减少重复逻辑

类型定义 ​

ts
type IMode = 'add' | 'edit' | 'check'

完整代码示例 ​

vue
<script setup lang="ts">
// 后端table定义每一行的数据结构
import type { ITableItem } from "@/api/upgrade/types"

import useDialogOut from "@sud-web/vue-hooks/useDialogOut"
const addEditHook = reactive(useDialogOut<ITableItem>())

</script>

<template>
  <AddEdit
    :data="addEditHook.row"
    :mode="addEditHook.mode"
    :disabled="addEditHook.disabled"
    v-model:visible="addEditHook.visible"
    @submit="requestTable"
  />
</template>