Merge pull request '增加ui示例' (#56) from zq-ui into master

Reviewed-on: #56

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 {