重构 表单，优化 菜单

kouchao · kouchao · commit fdd881e90bd2 · 2018-08-28T17:17:17.000+08:00
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # vue-layui
     去年没有时间进行开发，加上自己水平过低，暂缓了一阵，从今天开始继续。
     208/8/27
+点击预览: [demo演示](http://vue-layui.jskou.com)
 
 版本 开发中...
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.2.0",
+    "async-validator": "^1.8.5",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
diff --git a/src/App.vue b/src/App.vue
@@ -65,6 +65,8 @@
               <span>基本元素</span>
             </template>
             <lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
+            <lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
+
           </lay-menu-item>
         </lay-menu>
       </lay-side>
diff --git a/src/components/checkbox/index.js b/src/components/checkbox/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayCheckbox from './src/checkbox';
+
+/* istanbul ignore next */
+LayCheckbox.install = function(Vue) {
+	Vue.component(LayCheckbox.name, LayCheckbox);
+};
+
+export default LayCheckbox;
diff --git a/src/components/checkbox/src/checkbox.vue b/src/components/checkbox/src/checkbox.vue
@@ -22,7 +22,7 @@
 
 <script>
   export default {
-    name: 'layui-checkbox',
+    name: 'LayCheckbox',
     data: function () {
       return {
         hasValue: false,
diff --git a/src/components/form-item/index.js b/src/components/form-item/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayFormItem from '../form/src/form-item';
+
+/* istanbul ignore next */
+LayFormItem.install = function(Vue) {
+	Vue.component(LayFormItem.name, LayFormItem);
+};
+
+export default LayFormItem;
diff --git a/src/components/form/form.vue b/src/components/form/form.vue
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayForm from './src/form';
+
+/* istanbul ignore next */
+LayForm.install = function(Vue) {
+	Vue.component(LayForm.name, LayForm);
+};
+
+export default LayForm;
diff --git a/src/components/form/src/form-item.vue b/src/components/form/src/form-item.vue
@@ -14,7 +14,7 @@
 
 <script>
   export default {
-    name: 'layui-form-item',
+    name: 'LayFormItem',
     props: {
       label: String,
       block: Boolean,
diff --git a/src/components/form/src/form.vue b/src/components/form/src/form.vue
@@ -0,0 +1,49 @@
+<template>
+    <form class="layui-form"
+          :class="{
+             'layui-form-pane': border
+           }">
+        <slot></slot>
+    </form>
+</template>
+
+<script>
+    import schema from 'async-validator'
+
+	export default {
+		name: 'LayForm',
+		props: {
+			border: Boolean,
+			model: Object,
+			rules: Object
+		},
+		provide() {
+			return {
+				rootForm: this
+			};
+		},
+        methods: {
+	        handlerChange(){
+		        let validator = new schema(this.rules);
+		        validator.validate(this.model, (errors, fields) => {
+			        if(errors) {
+				        console.log(errors)
+			        }
+		        });
+            }
+        },
+		watch: {
+			model: {
+				deep: true,
+				handler(){
+					this.handlerChange()
+                }
+
+            }
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/input/index.js b/src/components/input/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayInput from './src/input';
+
+/* istanbul ignore next */
+LayInput.install = function(Vue) {
+	Vue.component(LayInput.name, LayInput);
+};
+
+export default LayInput;
diff --git a/src/components/input/src/input.vue b/src/components/input/src/input.vue
@@ -13,7 +13,7 @@
 
 <script>
   export default {
-    name: 'layui-input',
+    name: 'LayInput',
     props: {
       value: [String, Number],
       placeholder: String,
diff --git a/src/components/menu/src/menu-child-item.vue b/src/components/menu/src/menu-child-item.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-	import Menu from './menu-mixin';
 	import eventHub from '@/mixins/eventHub';
 	export default {
 		name: "LayMenuChildItem",
@@ -15,7 +14,8 @@
             	type: Object
             }
 		},
-        mixins: [Menu, eventHub],
+        mixins: [eventHub],
+		inject: ['rootMenu'],
         methods: {
 	        handleClick() {
 	        	if(this.$route && this.to){
diff --git a/src/components/menu/src/menu-item.vue b/src/components/menu/src/menu-item.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script>
-	import Menu from './menu-mixin';
 	import eventHub from '@/mixins/eventHub';
 	export default {
 		name: "LayMenuItem",
@@ -36,7 +35,8 @@
             }
 		},
 
-        mixins: [Menu, eventHub],
+        mixins: [eventHub],
+	    inject: ['rootMenu'],
         methods: {
 	        handleClick() {
 	        	if(this.$slots.default && this.rootMenu.mode == 'vertical'){
diff --git a/src/components/menu/src/menu-mixin.js b/src/components/menu/src/menu-mixin.js
diff --git a/src/components/radio/index.js b/src/components/radio/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayRadio from './src/radio';
+
+/* istanbul ignore next */
+LayRadio.install = function(Vue) {
+	Vue.component(LayRadio.name, LayRadio);
+};
+
+export default LayRadio;
diff --git a/src/components/radio/src/radio.vue b/src/components/radio/src/radio.vue
@@ -21,7 +21,7 @@
 
 <script>
   export default {
-    name: 'layui-radio',
+    name: 'LayRadio',
     props: {
       value: [String, Number],
       label: [String, Number],
diff --git a/src/components/select/index.js b/src/components/select/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LaySelect from './src/select';
+
+/* istanbul ignore next */
+LaySelect.install = function(Vue) {
+	Vue.component(LaySelect.name, LaySelect);
+};
+
+export default LaySelect;
diff --git a/src/components/select/src/select.vue b/src/components/select/src/select.vue
@@ -23,7 +23,7 @@
 
 <script>
   export default {
-    name: 'layui-select',
+    name: 'LaySelect',
     props: {
       disabled: Boolean,
       value: [String, Number],
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
@@ -0,0 +1,12 @@
+/**
+ * kouchao 创建于 2018/8/27
+ */
+
+import LayTextarea from './src/textarea';
+
+/* istanbul ignore next */
+LayTextarea.install = function(Vue) {
+	Vue.component(LayTextarea.name, LayTextarea);
+};
+
+export default LayTextarea;
diff --git a/src/components/textarea/src/textarea.vue b/src/components/textarea/src/textarea.vue
@@ -13,7 +13,7 @@
 
 <script>
   export default {
-    name: 'layui-textarea',
+    name: 'LayTextarea',
     props: {
       value: [String, Number],
       placeholder: String,
diff --git a/src/index.js b/src/index.js
@@ -11,13 +11,13 @@ import LayButton from '@/components/button'
 import LayButtonGroup from '@/components/button-group'
 import LayButtonContainer from '@/components/button-container'
 
-import form from '@/components/form/form'
-import formItem from '@/components/form/form-item'
-import radio from '@/components/form/radio'
-import input from '@/components/form/input'
-import checkbox from '@/components/form/checkbox'
-import select from '@/components/form/select'
-import textarea from '@/components/form/textarea'
+import LayForm from '@/components/form'
+import LayFormItem from '@/components/form-item'
+import LayRadio from '@/components/radio'
+import LayInput from '@/components/input'
+import LayCheckbox from '@/components/checkbox'
+import LaySelect from '@/components/select'
+import LayTextarea from '@/components/textarea'
 
 import tabs from '@/components/tabs/tabs'
 import tabPane from '@/components/tabs/tab-pane'
@@ -50,13 +50,13 @@ const layui = {
 			LayButton,
 			LayButtonContainer,
 			LayButtonGroup,
-			form,
-			formItem,
-			radio,
-			input,
-			checkbox,
-			select,
-			textarea,
+			LayForm,
+			LayFormItem,
+			LayRadio,
+			LayInput,
+			LayCheckbox,
+			LaySelect,
+			LayTextarea,
 			tabs,
 			tabPane,
 			hr,
diff --git a/src/router.js b/src/router.js
diff --git a/src/views/Form.vue b/src/views/Form.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue
