feat: 函数式弹窗示例代码添加子组件prop为primitive类型的demo (#587)

src/views/components/dialog/index.vue

@@ -3,6 +3,7 @@ import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
 import forms, { type FormProps } from "./form.vue";
+import formPrimitive from "./formPrimitive.vue";
 import { cloneDeep, debounce } from "@pureadmin/utils";
 import {
   addDialog,
@@ -316,7 +317,10 @@ function onFormTwoClick() {
   addDialog({
     width: "30%",
     title: "结合Form表单（第二种方式）",
-    contentRenderer: () => h(forms, { formInline: formInline.value }),
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
     closeCallBack: () => {
       message(
         `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
@@ -338,7 +342,9 @@ function onFormThreeClick() {
     width: "30%",
     title: "结合Form表单（第三种方式）",
     contentRenderer: () =>
-      createVNode(forms, { formInline: formThreeInline.value }),
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
     closeCallBack: () => {
       message(
         `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
@@ -373,6 +379,26 @@ function onFormFourClick() {
   });
 }
 
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+  addDialog({
+    width: "30%",
+    title: "子组件 prop 为 primitive 类型 demo",
+    contentRenderer: () =>
+      h(formPrimitive, {
+        data: formPrimitiveParam.value,
+        "onUpdate:data": val => (formPrimitiveParam.value = val)
+      }),
+    closeCallBack: () => {
+      message(`当前表单内容：${formPrimitiveParam.value}`);
+      // 重置表单数据
+      formPrimitiveParam.value = resetFormPrimitiveParam.value;
+    }
+  });
+}
+
 function onBeforeCancelClick() {
   addDialog({
     title: "点击底部取消按钮的回调",
@@ -474,6 +500,9 @@ function onBeforeSureClick() {
       <el-button @click="onFormFourClick">
         结合Form表单（第四种方式）
       </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
     </el-space>
     <el-divider />
     <el-space wrap>