表单设计-按钮组件-基础设定

src/views/demo/form-design/components/VFormDesign/config/componentPropsConfig.ts

@@ -1080,14 +1080,39 @@ const componentAttrs: IBaseComponentProps = {
             label: 'primary',
             value: 'primary',
           },
-          {
-            label: 'danger',
-            value: 'danger',
-          },
           {
             label: 'dashed',
             value: 'dashed',
           },
+          {
+            label: 'link',
+            value: 'link',
+          },
+          {
+            label: 'text',
+            value: 'text',
+          },
+        ],
+      },
+    },
+    {
+      name: 'shape',
+      label: '形状',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '朴素按钮',
+            value: 'default',
+          },
+          {
+            label: '圆形按钮',
+            value: 'circle',
+          },
+          {
+            label: '圆角按钮',
+            value: 'round',
+          },
         ],
       },
     },

src/views/demo/form-design/components/VFormItem/index.vue

@@ -13,7 +13,6 @@
           <Icon v-if="schema.helpMessage" class="ml-5" icon="ant-design:question-circle-outlined" />
         </Tooltip>
       </template>
-
       <slot
         v-if="schema.componentProps && schema.componentProps?.slotName"
         :name="schema.componentProps.slotName"
@@ -38,6 +37,21 @@
         >
           图斑组件
         </Divider>
+        <a-button
+          v-if="['Button'].includes(schema.component)"
+          :type="schema.componentProps.type"
+          :shape="schema.componentProps.shape"
+          :size="schema.componentProps.size"
+          :icon="schema.componentProps.icon"
+          :defaultValue="schema.defaultValue"
+          v-bind="{ ...cmpProps, ...asyncProps }"
+          :schema="schema"
+          :style="schema.width ? { width: schema.width } : {}"
+          @change="handleChange"
+          @click="handleClick(schema)"
+        >
+          {{ schema.label }}
+        </a-button>
         <component
           v-else
           class="v-form-item-wrapper"
@@ -50,7 +64,6 @@
           @click="handleClick(schema)"
         />
       </div>
-      <span v-if="['Button'].includes(schema.component)">{{ schema.label }}</span>
     </FormItem>
   </Col>
 </template>

src/views/demo/form-design/core/formItemConfig.ts

@@ -151,11 +151,7 @@ export const customComponents: IVFormComponent[] = [
     componentProps: {},
     columns: [
       {
-        span: 12,
+        span: 24,
-        children: [],
-      },
-      {
-        span: 12,
         children: [],
       },
     ],
@@ -444,15 +440,20 @@ export const baseComponents: IVFormComponent[] = [
       ],
     },
   },
-  // {
+  {
-  //   component: 'Button',
+    component: 'Button',
-  //   label: '按钮',
+    label: '按钮组件',
-  //   icon: 'dashicons:button',
+    icon: 'ant-design:build-outlined',
-  //   field: '',
+    field: '',
-  //   colProps: { span: 24 },
+    colProps: { span: 24 },
-  //   hiddenLabel: true,
+    hiddenLabel: true,
-  //   componentProps: {},
+    componentProps: {
-  // },
+      type: 'default',
+      shape: 'default',
+      size: 'middle',
+      icon: '',
+    },
+  },
   // {
   //   component: 'ColorPicker',
   //   label: '颜色选择器',
@@ -464,7 +465,6 @@ export const baseComponents: IVFormComponent[] = [
   //     value: '',
   //   },
   // },
-
   {
     component: 'slot',
     label: '插槽',