refactor: 优化 row代码

kouchao · kouchao · commit 34fa1ad23bf6 · 2019-04-22T14:16:15.000+08:00
diff --git a/src/components/row/index.js b/src/components/row/index.js
@@ -1,11 +1,7 @@
-/**
- * kouchao 创建于 2018/8/27
- */
-
-import LayRow from "./src/row";
+import Row from './src/row';
 /* istanbul ignore next */
-LayRow.install = function(Vue) {
-  Vue.component(LayRow.name, LayRow);
+Row.install = function (Vue) {
+  Vue.component(Row.name, Row);
 };
 
-export default LayRow;
+export default Row;
diff --git a/src/components/row/src/row.vue b/src/components/row/src/row.vue
@@ -1,26 +1,26 @@
 <template>
-  <div :class="classList">
-    <slot></slot>
+  <div
+    :class="[
+      'layui-row',
+      `layui-col-space${space}`
+    ]"
+  >
+    <slot />
   </div>
 </template>
 
 <script>
+import { oneOf } from '@/utils/validatorProps';
 export default {
-  name: "LayRow",
+  name: 'LayRow',
   props: {
-    space: Number
-  },
-  data: function() {
-    return {
-      classList: "layui-row "
-    };
-  },
-  mounted: function() {
-    if (this.space) {
-      this.classList += `layui-col-space${this.space} `;
+    space: {
+      type: Number,
+      default: 0,
+      validator (value) {
+        return oneOf('space', [0, 1, 3, 5, 8, 10, 12, 15, 18, 20, 22, 28, 30], value);
+      }
     }
   }
 };
 </script>
-
-<style></style>
diff --git a/src/views/Grid.md b/src/views/Grid.md
@@ -221,7 +221,7 @@
 ::: demo
 
 ```html
-  <lay-row>
+<lay-row>
   <lay-col :md="1">
     <div class="grid-demo grid-demo-bg1">1/12</div>
   </lay-col>
@@ -573,24 +573,21 @@
 <lay-block title="row 属性"></lay-block>
 <!-- {.md} -->
 
-| 参数           | 说明             | 类型      | 可选值                             | 默认值     |
-| ------------- | ---------------- | -------- | --------------------------------- | --------- |
-| space         | 列间隔            | `Number` | --                                | `0`       |
+| 参数 | 说明 | 类型 | 可选值 | 默认值 
+| --- | --- | --- | --- | --- |
+| space | 列间隔 | `Number` | `0, 1, 3, 5, 8, 10, 12, 15, 18, 20, 22, 28, 30` | `0` |
 
 
 <lay-block title="col 属性"></lay-block>
 <!-- {.md} -->
 
-| 参数        | 说明             | 类型      | 可选值                             | 默认值     |
-| -----------| ---------------- | -------- | --------------------------------- | --------- |
-| xs         | 布局占比(见layui说明) | `Number` | --                                | --       |
-| sm         | 布局占比          | `Number` | --                                | --       |
-| md         | 布局占比          | `Number` | --                                | --       |
-| lg         | 布局占比          | `Number` | --                                | --       |
-| xl         | 布局占比          | `Number` | --                                | --       |
-| offset     | 列偏移          | `Number` | --                                | `0`       |
-
-
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| sm | 布局占比 | `Number` | -- | -- |
+| md | 布局占比 | `Number` | -- | -- |
+| lg | 布局占比 | `Number` | -- | -- |
+| xl | 布局占比 | `Number` | -- | -- |
+| offset | 列偏移 | `Number` | -- | `0` |
 
 <script>
 export default {
