fix: schema-form插槽错误

Author: LKCCY

docs/.vuepress/components/code-contain.vue

@@ -22,7 +22,10 @@ import AddItem from './add-item'
 import LayoutGutter from './layout-gutter'
 import LayoutOffset from './layout-offset'
 import LayoutFlexible from './layout-flexible'
-
+// slot 布局
+import SlotFront from './slot-front'
+import SlotRear from './slot-rear'
+import SlotSlot from './slot-slot'
 
 export default {
   props: {
@@ -38,7 +41,10 @@ export default {
     AddItem,
     LayoutGutter,
     LayoutOffset,
-    LayoutFlexible
+    LayoutFlexible,
+    SlotFront,
+    SlotRear,
+    SlotSlot
   },
   data () {
     return {

docs/.vuepress/components/slot-front.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-form size="small">
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+      <div slot="name">
+        <span>姓名</span>
+        <el-tooltip content="请输入用户姓名" placement="right">
+          <i class="el-icon-warning"></i>
+        </el-tooltip>
+      </div>
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: {
+        name: ''
+      },
+      schema: [
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            formItem: { label: '' },
+            frontSlot: 'name'
+          }
+        ]
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/components/slot-rear.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-form size="small">
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+      <div slot="name" class="text-area">
+        <span class="text-area__num">{{model.name.length}}</span>字
+      </div>
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      model: {
+        name: ''
+      },
+      schema: [
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            formItem: { label: '姓名' },
+            rearSlot: 'name'
+          }
+        ]
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-area{
+  text-align: right;
+}
+.text-area__num{
+  margin-right:5px;
+}
+</style>

docs/.vuepress/components/slot-slot.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-form size="small">
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+      <el-form-item label="活动名称" slot="name">
+        <el-input v-model="model.name"></el-input>
+      </el-form-item>
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: {
+        name: ''
+      },
+      schema: [
+        [{ slot: 'name' }]
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/config.js

@@ -41,7 +41,8 @@ module.exports = {
           children: [
             '/guide/component/SchemaForm',
             ['/guide/component/schema', 'schema 详解'],
-            ['/guide/component/layout', 'layout 布局']
+            ['/guide/component/layout', 'layout 布局'],
+            ['/guide/component/slot', 'slot 插槽']
           ]
         }
       ]

docs/guide/component/schema.md

@@ -113,12 +113,11 @@ on: {
 }
 ```
 
-## 插槽 slot
+## 插槽 slot 
 
 参数|说明|
 :--|:--
 slot| 自定义完整组件
 frontSlot| 定义element 组件前的插槽
-compSlot| 定义element 组件内的插槽
 rearSlot| 定义element 组件后的插槽
 

docs/guide/component/slot.md

@@ -0,0 +1,17 @@
+### 插槽
+
+<code-contain compName="SlotSlot" link="https://codesandbox.io/s/chacao-697j3?fontsize=14">  
+<<< @/docs/.vuepress/components/slot-slot.vue
+</code-contain>
+
+### 前置插槽
+
+<code-contain compName="SlotFront" link="https://codesandbox.io/s/qianzhichacao-5phtv?fontsize=14">  
+<<< @/docs/.vuepress/components/slot-front.vue
+</code-contain>
+
+### 后置插槽
+
+<code-contain compName="SlotRear" link="https://codesandbox.io/s/houzhichacao-vrkco?fontsize=14">  
+<<< @/docs/.vuepress/components/slot-rear.vue
+</code-contain>

src/packages/SchemaForm.vue

@@ -18,7 +18,10 @@
               :model="model"
               :options="options"
               v-on="$listeners"
-            />
+            >
+             <slot v-if="col.frontSlot" :name="col.frontSlot" :slot="col.frontSlot"></slot>
+             <slot v-if="col.rearSlot" :name="col.rearSlot" :slot="col.rearSlot"></slot>
+            </schema-form-item>
           </template>
         </el-col>
       </template>

src/packages/SchemaFormItem.vue

@@ -12,7 +12,6 @@
       :onEvents="col.on"
       :options="options[col.prop]"
     >
-      <slot :name="col.compSlot" v-if="col.compSlot"></slot>
     </component>
     <slot :name="col.rearSlot" v-if="col.rearSlot"></slot>
   </el-form-item>