From d76db3d74aeb8db9d1c1e358d62a9f0885fdfe9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Tue, 22 Aug 2017 13:31:36 +0800
Subject: [PATCH] Layout: optimize doc && code review

---
 docs/examples-docs/layout.md     | 90 +++++++++++++-------------------
 docs/examples-docs/quickstart.md |  6 +--
 docs/src/doc.config.js           |  2 +-
 package.json                     |  2 +-
 packages/col/src/col.vue         | 45 ++++++++--------
 packages/row/src/row.vue         | 45 ++++++++--------
 yarn.lock                        | 10 ++--
 7 files changed, 92 insertions(+), 108 deletions(-)

diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md
index 8df684302..93762dbeb 100644
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
@@ -1,93 +1,75 @@
 <style>
 .demo-layout {
   .van-row {
-    padding: 0 20px;
+    padding: 0 15px;
   }
   .van-col {
-    margin-bottom: 10px;
-  }
-}
-
-.gray {
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-    background: #666;
     color: #fff;
-    text-align: center;
-}
-.white {
-    height: 30px;
-    line-height: 30px;
     font-size: 12px;
-    background: #fff;
-    color: #333;
+    line-height: 30px;
     text-align: center;
+    margin-bottom: 10px;
+    background-clip: content-box;
+
+    &:nth-child(odd) {
+      background-color: #39a9ed;
+    }
+
+    &:nth-child(even) {
+      background-color: #66c6f2;
+    }
+  }
 }
 </style>
 
 ## Layout 布局
 
-提供了`van-row`和`van-col`两个组件来进行行列布局。
+提供了`van-row`和`van-col`两个组件来进行行列布局
 
 ### 使用指南
 ``` javascript
-import { Layout } from 'vant';
+import { Row, Col } from 'vant';
 
-Vue.component(Layout.name, Layout);
+Vue.component(Row.name, Row);
+Vue.component(Col.name, Col);
 ```
 
 ### 代码演示
 
-#### 常规用法
+#### 基本用法
 
-Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比    
+此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
 
-:::demo 常规用法
+:::demo 基本用法
 ```html
 <van-row>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="white">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
 </van-row>
+
 <van-row>
-  <van-col span="4">
-    <div class="gray">span: 4</div>
-  </van-col>
-  <van-col span="10" offset="4">
-    <div class="gray">offset: 4, span: 10</div>
-  </van-col>
+  <van-col span="4">span: 4</van-col>
+  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
 </van-row>
+
 <van-row>
-  <van-col offset="12" span="12">
-    <div class="gray">offset: 12, span: 12</div>
-  </van-col>
+  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
 </van-row>
 ```
 :::
 
-#### 在列元素之间增加间距
+#### 设置列元素间距
 
-列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
+通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
 
 :::demo 在列元素之间增加间距
 ```html
 <van-row gutter="20">
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
 </van-row>
 ```
 :::
@@ -98,9 +80,11 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | gutter | 列元素之间的间距（单位为px） | `String | Number`  | -  |   |
+| prefix | className 前缀 | `String`  | `van`  |   |
 
 #### Column
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | span | 列元素宽度 | `String | Number`  | -  |   |
-| offset | 列元素偏移宽度 | `String | Number`  | -  |   |
+| offset | 列元素偏移距离 | `String | Number`  | -  |   |
+| prefix | className 前缀 | `String`  | `van`  |   |
diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index a8d2fd815..838dc92f6 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -1,6 +1,6 @@
 ## Vant
 
-一套基于`Vue.js 2.0`的 Mobile 组件库
+基于`Vue 2.0`的 Mobile 组件库
 
 ### 安装
 
@@ -47,11 +47,11 @@ Vue.use(vant);
 
 ### 自定义主题
 
-`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
 
 #### 下载主题
 
-可以通过Github或npm来下载主题：
+可以通过 Github 或 npm 来下载主题：
 
 ```bash
 # npm
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 6a2a62c5d..110f0cadb 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -40,7 +40,7 @@ module.exports = {
         ]
       },
       {
-        "name": "Vant组件",
+        "name": "组件列表",
         "showInMobile": true,
         "groups": [
           {
diff --git a/package.json b/package.json
index 43297595b..4beb3342a 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "0.2.0"
+    "zan-doc": "^0.2.1"
   }
 }
diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue
index 51fa4c7dc..281d0995e 100644
--- a/packages/col/src/col.vue
+++ b/packages/col/src/col.vue
@@ -13,27 +13,28 @@
 </template>
 
 <script>
-  export default {
-    name: 'van-col',
-    props: {
-      span: [Number, String],
-      offset: [Number, String],
-      prefix: {
-        type: String,
-        default: 'van'
-      }
-    },
-    computed: {
-      gutter() {
-        if (!this.$parent) return 0;
-        return Number(this.$parent.gutter) || 0;
-      },
-      style() {
-        const padding = `${this.gutter / 2}px`;
-        return this.gutter
-          ? { paddingLeft: padding, paddingRight: padding }
-          : null;
-      }
+export default {
+  name: 'van-col',
+
+  props: {
+    span: [Number, String],
+    offset: [Number, String],
+    prefix: {
+      type: String,
+      default: 'van'
     }
-  };
+  },
+
+  computed: {
+    gutter() {
+      return (this.$parent && Number(this.$parent.gutter)) || 0;
+    },
+    style() {
+      const padding = `${this.gutter / 2}px`;
+      return this.gutter
+        ? { paddingLeft: padding, paddingRight: padding }
+        : null;
+    }
+  }
+};
 </script>
diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue
index 036b9fb1c..374cc793a 100644
--- a/packages/row/src/row.vue
+++ b/packages/row/src/row.vue
@@ -1,32 +1,31 @@
 <template>
-  <div
-    :class="`${prefix}-row`"
-    :style="style">
+  <div :class="`${prefix}-row`" :style="style">
     <slot></slot>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'van-row',
-    props: {
-      prefix: {
-        type: String,
-        default: 'van'
-      },
-      gutter: {
-        type: [Number, String],
-        default: 0
-      }
+export default {
+  name: 'van-row',
+
+  props: {
+    prefix: {
+      type: String,
+      default: 'van'
     },
-    computed: {
-      style() {
-        const gutter = Number(this.gutter);
-        const margin = `-${gutter / 2}px`;
-        return gutter
-          ? { marginLeft: margin, marginRight: margin }
-          : {};
-      }
+    gutter: {
+      type: [Number, String],
+      default: 0
     }
-  };
+  },
+
+  computed: {
+    style() {
+      const margin = `-${Number(this.gutter) / 2}px`;
+      return this.gutter
+        ? { marginLeft: margin, marginRight: margin }
+        : null;
+    }
+  }
+};
 </script>
diff --git a/yarn.lock b/yarn.lock
index 9ea1f3de1..f546eae28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4809,7 +4809,7 @@ markdown-it@^6.0.5:
     mdurl "~1.0.1"
     uc.micro "^1.0.1"
 
-markdown-it@^8.3.1, markdown-it@^8.3.2:
+markdown-it@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.2.tgz#df4b86530d17c3bc9beec3b68d770b92ea17ae96"
   dependencies:
@@ -7926,13 +7926,13 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.0.tgz#40b31c4f1cc5ae539853a06b30f1cb479e2edca3"
+zan-doc@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"
-    markdown-it "^8.3.1"
+    markdown-it "^8.3.2"
     markdown-it-container "^2.0.0"
     node-watch "^0.5.5"
     nprogress "^0.2.0"