取一个标题好难的的dialog hook

// useDialog.js
import { ref } from 'vue'

import { cloneDeep } from 'lodash-es'

export const useDialog = (
  dataTransFn = ({ row = {}, index, ...args } = {}) => {
    return {
      row: cloneDeep(row),
      index,
      ...args
    }
  }
) => {
  const state = ref({ row: {} })
  const visible = ref(false)
  const isDomRender = ref(false)

  const show = async (...args) => {
    const res = await dataTransFn(...args)
    if (!res) return
    isDomRender.value = true
    visible.value = true
    state.value = res
  }
  const hide = () => {
    visible.value = false

    setTimeout(() => {
      isDomRender.value = false
    }, 300)
  }

  return {
    state,
    visible,
    isDomRender,
    show,
    hide
  }
}

// SomeDialogComponent.vue


const { show, hide, state } = useDialog()

defineExpose({
    show
})

//  ParentComponent

<SomeDialogComponent ref="someDialogComponentRef" />


const someDialogComponentRef = ref()

const handleDialogShow = (row)=>{
 someDialogComponentRef.value.show({ row })

}