新增/编辑同构表单弹框 EditFormDialog

提示

该组件的同构是面向新增/编辑时数据相同，且可以通过 id 判断新增/编辑数据的情况

警告

由于内部使用 klona/json 进行深拷贝

暂不支持 对数据内含有非 json 语法的数据进行拷贝

<Drawer/> 模式

<script setup lang="ts">
import { EditFormDialog, useEditFormDialog } from '@vrx-arco/pro-components'
import { FormItem as AFormItem, Input as AInput, Button, Card, Space } from '@arco-design/web-vue'
import { ref } from 'vue'

const [formRef, open] = useEditFormDialog()
const editData = ref({ id: 'sss', title: 'sss' })
function request() {
  return new Promise((resolve) => {
    window.setTimeout(resolve, 2000)
  })
}
</script>

<template>
  <Card>
    <Space>
      <Button @click="open()">
        新增
      </Button>
      <Button @click="open(editData)">
        编辑
      </Button>
    </Space>
    <EditFormDialog id="id" ref="formRef" title="表单" width="300px" @confirm="request">
      <template #default="{ model }">
        <AFormItem label="标题">
          <AInput v-model="model.title" />
        </AFormItem>
      </template>
    </EditFormDialog>
  </Card>
</template>

<Modal/> 模式

<script setup lang="ts">
import { EditFormDialog, useEditFormDialog } from '@vrx-arco/pro-components'
import { FormItem as AFormItem, Input as AInput, Button, Card, Space } from '@arco-design/web-vue'
import { ref } from 'vue'

const [formRef, open] = useEditFormDialog()
const editData = ref({ id: 'sss', title: 'sss' })
function request() {
  return new Promise((resolve) => {
    window.setTimeout(resolve, 2000)
  })
}
</script>

<template>
  <Card>
    <Space>
      <Button @click="open()">
        新增
      </Button>
      <Button @click="open(editData)">
        编辑
      </Button>
    </Space>
    <EditFormDialog
      id="id"
      ref="formRef"
      type="modal"
      title="表单"
      width="600px"
      @confirm="request"
    >
      <template #default="{ model }">
        <AFormItem label="标题">
          <AInput v-model="model.title" />
        </AFormItem>
      </template>
    </EditFormDialog>
  </Card>
</template>

API

<EditFormDialog> Props

暂无数据

<EditFormDialog> Events

暂无数据

<EditFormDialog> Slots

暂无数据

useEditFormDialog

<EditFormDialog/> 组件帮助方法

配合 <EditFormDialog/> 使用

<script lang="ts" setup>
import { useEditFormDialog } from '@vrx-arco/pro-components'

/**
 * @param formRef EditFormDialog组件实例
 * @param open 打开EditFormDialog组件
 */
const [formRef, open] = useEditFormDialog()

// open 方法增加类型验证
const [formRef, open] = useEditFormDialog<{ username: string, userId: string }>()

// 打开EditFormDialog组件
open()

// 可传入数据，为 EditFormDialog 提供数据拷贝
open({ username: '', userId: '' })
</script>

<template>
  <EditFormDialog ref="formRef">
    <template #default="{ model }">
      <AFormItem label="username" field="username">
        <AInput v-model="model.username" placeholder="username" />
      </AFormItem>
    </template>
  </EditFormDialog>
</template>

配合任意弹框组件使用

由于 useEditFormDialog 本质为调用组件实例的open方法

只需在独立的弹框组件声明 expose({open})

即可利用 useEditFormDialog 方法，达到打开弹窗组件的作用

EditFormDialogSlot

为 <EditFormDialog /> 的默认插槽提供类型帮助

<script lang="ts" setup>
import { type EditFormDialogSlot, useEditFormDialog } from '@vrx-arco/pro-components'

/**
 * @param formRef EditFormDialog组件实例
 * @param open 打开EditFormDialog组件
 */
const [formRef, open] = useEditFormDialog()
</script>

<template>
  <EditFormDialog ref="formRef">
    <template #default="{ model }: EditFormDialogSlot<{ username: string; id: string }>">
      <AFormItem label="username" field="username">
        <AInput v-model="model.username" placeholder="username" />
      </AFormItem>
    </template>
  </EditFormDialog>
</template>