fix: fs-form独立使用支持插槽

fast-crud/fast-crud#389
fast-crud · Jun 8, 2024 · e70c240 · e70c240
1 parent ce00dee
commit e70c240
Showing 1 changed file with 23 additions and 22 deletions.
diff --git a/src/views/crud/form/independent/index.vue b/src/views/crud/form/independent/index.vue
@@ -3,53 +3,50 @@
     <template #header>
       <div class="title">独立使用表单</div>
       <div class="more">
-        <a target="_blank"
-href="http://fast-crud.docmirror.cn/api/use.html#useformwrapper">文档</a>
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#useformwrapper">文档</a>
       </div>
     </template>
     <div style="padding: 20px">
       <a-row :gutter="10">
         <a-col :span="12">
-          <a-card class="mt-10"
-title="直接显示表单">
-            <fs-form
-ref="formRef" v-bind="formOptions" />
+          <a-card class="mt-10" title="直接显示表单">
+            <fs-form ref="formRef" v-bind="formOptions">
+              <template #form_slot="scope">
+                <a-input v-model:value="scope.form.slot">
+                  <template #prefix>
+                    <fs-icon icon="ion:search"></fs-icon>
+                  </template>
+                </a-input>
+              </template>
+            </fs-form>
             <div style="margin-top: 10px">
               <a-button @click="formSubmit"> 提交表单 </a-button>
               <a-button @click="formReset"> 重置表单 </a-button>
-              <a-button
-class="ml-10" @click="setFormDataTest"> setFormData </a-button>
+              <a-button class="ml-10" @click="setFormDataTest"> setFormData </a-button>
             </div>
           </a-card>
         </a-col>
         <a-col span="12">
-          <a-card class="mt-10"
-title="直接打开对话框,无需写 fs-form-wrapper 标签">
+          <a-card class="mt-10" title="直接打开对话框,无需写 fs-form-wrapper 标签">
             <div style="margin-top: 10px">
               <a-button @click="openFormWrapperNoTag"> 打开对话框 </a-button>
 
               <div>需要在app.vue使用fs-form-context包裹router-view</div>
             </div>
           </a-card>
-          <a-card class="mt-10"
-title="打开表单对话框">
+          <a-card class="mt-10" title="打开表单对话框">
             <a-button @click="openFormWrapper"> 打开表单对话框 </a-button>
-            <fs-form-wrapper ref="formWrapperRef"
-v-bind="formWrapperOptions" />
+            <fs-form-wrapper ref="formWrapperRef" v-bind="formWrapperOptions" />
           </a-card>
 
-          <a-card class="mt-10"
-title="打开表单对话框（复用crudOptions）">
+          <a-card class="mt-10" title="打开表单对话框（复用crudOptions）">
             <a-button @click="openFormWrapper2"> 打开表单对话框 </a-button>
-            <fs-form-wrapper ref="formWrapper2Ref"
-v-bind="formWrapper2Options" />
+            <fs-form-wrapper ref="formWrapper2Ref" v-bind="formWrapper2Options" />
           </a-card>
 
-          <a-card class="mt-10"
-title="打开表单对话框【复用crudBinding】">
+          <a-card class="mt-10" title="打开表单对话框【复用crudBinding】">
             <a-button @click="openFormWrapper2"> 打开表单对话框 </a-button>
-            <fs-form-wrapper ref="formWrapperRef2"
-v-bind="formWrapperOptions2" />
+            <fs-form-wrapper ref="formWrapperRef2" v-bind="formWrapperOptions2" />
           </a-card>
         </a-col>
       </a-row>
@@ -94,6 +91,10 @@ function createFormOptions() {
         title: "日期",
         type: "date"
       },
+      slot: {
+        title: "插槽",
+        type: "text"
+      },
       groupField: {
         title: "分组字段",
         form: {