Form & Dialog
Form 与 Dialog 联动在 crud 中属于频繁业务. 应用好这两把 剑 尤为重要
禁用 Form
在调用开启 dialog open 方法时可键入 disabled 它不仅仅能帮你禁用 dialog, 也能禁用掉所有的 Form 表单
<template>
<Dialog ref="dialogRef">
<Form :createOption="form" />
</Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
type: "Input",
label: "label1",
model: "label1",
row: [12],
},
{
type: "Input",
label: "label2",
model: "label2",
row: [12],
},
{
type: "Input",
label: "label3",
model: "label3",
placeholder: "需要生成自定义placeholder",
},
],
data: ref({
label1: "",
label2: "123",
label3: "",
}),
labelWidth: 60,
});
const dialogRef = ref();
const openDialog = () => {
dialogRef.value.open({
disabled: true,
title: "标题",
});
};
</script>
显示代码
快速提交表单
仅仅需要配置好表单与对话框, dialog 会自动对表单发起验证 通过即调用接口。
<template>
<Dialog ref="dialogRef">
<Form :createOption="form" />
</Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const dialogRef = ref();
const form = CreateForm({
api: "createUser",
form: [
{
type: "Input",
label: "昵称",
model: "label",
row: [24],
},
{
type: "Input",
label: "电话",
model: "phone",
placeholder: "需要生成自定义placeholder",
},
],
data: ref({
label1: "",
label2: "123",
label3: "",
}),
labelWidth: 60,
createRule(create) {
return {
label: create.required(),
phone: create.required().phone(),
};
},
});
const openDialog = () => {
dialogRef.value.open({
title: "标题",
});
};
</script>
显示代码
提交成功如何 夺回 对话框、提示等控制权
使用 onSuccess 夺回控制权
下列演示不关闭对话框
<template>
<Dialog ref="dialogRef">
<Form :createOption="form" />
</Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const dialogRef = ref();
const form = CreateForm({
api: "createUser",
form: [
{
type: "Input",
label: "昵称",
model: "label",
},
{
type: "Input",
label: "电话",
model: "phone",
},
],
data: ref({
label1: "",
label2: "123",
label3: "",
}),
labelWidth: 60,
createRule(create) {
return {
label: create.required(),
phone: create.required().phone(),
};
},
onSuccess(done) {
done(false);
},
});
const openDialog = () => {
dialogRef.value.open({
title: "标题",
});
};
</script>
显示代码