From 700a54e995fa53923ebc64e430fc296ec762fa74 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 25 Jun 2025 10:48:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0ui=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/elementGroups.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 9bacfbe..48d738f 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -272,6 +272,21 @@
                     <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
                         v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
                 </div>
+                <div style="width: 400px;height: 150px;">
+                    <h3>自定义 表单内容 </h3>
+                    <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
+                    <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
+                        <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
+                        添加必输校验 直接使用 required 属性
+                        特殊的使用slot = formLeft 自定义内容；
+                        添加独立类名，修改样式 -->
+                        <!-- <b slot="formLeft">自定义左侧</b> -->
+                        <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
+                        <!-- 自定义下方内容 -->
+                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age"
+                            prop="age" placeholder="请输入" />
+                    </GuipFormItem>
+                </div>
 
                 <div class="ele-item">
                     <label for="">开关L</label>
@@ -360,6 +375,7 @@ import GuipTable from '@/components/GuipTable.vue';
 import GuipTextarea from '@/components/GuipTextarea.vue'
 import GuipToolTip from '@/components/GuipToolTip.vue'
 import HoverButton from '@/components/HoverButton.vue'
+import GuipFormItem from '@/components/GuipFormItem.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 
 // import { mapState } from 'vuex'
@@ -377,7 +393,8 @@ export default {
         GuipSelect,
         GuipToolTip,
         HoverButton,
-        SvgIcon
+        SvgIcon,
+        GuipFormItem
     },
     data() {
         return {