docs: 自定义组件文档

Author: LKCCY

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

@@ -26,6 +26,10 @@ import LayoutFlexible from './layout-flexible'
 import SlotFront from './slot-front'
 import SlotRear from './slot-rear'
 import SlotSlot from './slot-slot'
+// 自定义组件
+import CustomInput from './custom-input'
+// 动态属性
+import DynamicInput from './dynamic-input'
 
 export default {
   props: {
@@ -44,7 +48,9 @@ export default {
     LayoutFlexible,
     SlotFront,
     SlotRear,
-    SlotSlot
+    SlotSlot,
+    CustomInput,
+    DynamicInput
   },
   data () {
     return {

docs/.vuepress/components/custom-input.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-form>
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: { num: 1 },
+      schema: [
+        [
+          {
+            type: 'CustomNumber',
+            prop: 'num',
+            formItem: { label: '自定义组件' },
+            attrs: { precision: 2, step: 0.1, max: 10 }
+          }
+        ]
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/components/custom/custom-number.vue

@@ -0,0 +1,23 @@
+
+<template>
+  <el-input-number 
+    v-model="bindVal"
+    v-bind="attrsAll"
+    v-on="onEvents"
+  ></el-input-number>
+</template>
+
+<script>
+
+import { FormMixin } from '../../../../src/index'
+
+export default {
+  name: 'CustomNumber',
+  mixins: [FormMixin]
+}
+
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/components/dynamic-input.vue

@@ -0,0 +1,47 @@
+<template>
+   <el-form label-width="80px">
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: {
+        name: '',
+        editable: true
+      }
+    }
+  },
+  computed: {
+    schema () {
+      return [
+        [ 
+          {
+            type: 'switch',
+            prop: 'editable',
+            formItem: { label: '可编辑' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            formItem: { label: '姓名' },
+            dynamicAttrs: { disabled: !this.model.editable }
+          }
+        ]
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/config.js

@@ -42,7 +42,9 @@ module.exports = {
             '/guide/component/SchemaForm',
             ['/guide/component/schema', 'schema 详解'],
             ['/guide/component/layout', 'layout 布局'],
-            ['/guide/component/slot', 'slot 插槽']
+            ['/guide/component/slot', 'slot 插槽'],
+            ['/guide/component/dynamic', 'dynamicAttrs 动态属性'],
+            ['/guide/component/custom', '自定义组件']
           ]
         }
       ]

docs/.vuepress/enhanceApp.js

@@ -1,9 +1,12 @@
 import SchemaForm  from '../../src/index.js'
 import ElementUI from "element-ui"
+import CustomNumber from './components/custom/custom-number.vue'
+
 import "element-ui/lib/theme-chalk/index.css"
 import '@vuepress/theme-default'
 
 export default ({ Vue }) => {
   Vue.use(SchemaForm)
   Vue.use(ElementUI)
+  Vue.component('CustomNumber', CustomNumber)
 }

docs/guide/component/custom.md

@@ -0,0 +1,38 @@
+### 自定义组件
+
+#### 定义组件
+``` js
+<template>
+   <el-input-number 
+    v-model="bindVal"
+    v-bind="attrsAll"
+    v-on="onEvents"
+  ></el-input-number>
+</template>
+
+<script>
+import { FormMixin } from '@vueblocks/element-schema-form'
+export default {
+  name: 'CustomNumber',
+  mixins: [FormMixin]
+}
+</script>
+```
+
+#### main.js 全局引入组件
+``` js
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import SchemaForm from '@vueblocks/element-schema-form'
+import CustomNumber from '@/components/custom-number.vue'
+
+Vue.use(ElementUI)
+Vue.use(SchemaForm)
+Vue.component('CustomNumber', CustomNumber)
+```
+
+#### 使用自定义组件
+
+<code-contain compName="CustomInput" link="https://codesandbox.io/s/zidingyizujian-qk1h8?fontsize=14">  
+<<< @/docs/.vuepress/components/custom-input.vue
+</code-contain>

docs/guide/component/dynamic.md

@@ -0,0 +1,5 @@
+#### 使用动态属性联动
+
+<code-contain compName="DynamicInput" link="https://codesandbox.io/s/dongtaishuxing-urlvq?fontsize=14">  
+<<< @/docs/.vuepress/components/dynamic-input.vue
+</code-contain>