Layout: optimize doc && code review

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;
+    line-height: 30px;
-    color: #333;
     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">
+  <van-col span="8">span: 8</van-col>
-    <div class="gray">span: 8</div>
+  <van-col span="8">span: 8</van-col>
-  </van-col>
+  <van-col span="8">span: 8</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-row>
+
 <van-row>
-  <van-col span="4">
+  <van-col span="4">span: 4</van-col>
-    <div class="gray">span: 4</div>
+  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
-  </van-col>
-  <van-col span="10" offset="4">
-    <div class="gray">offset: 4, span: 10</div>
-  </van-col>
 </van-row>
+
 <van-row>
-  <van-col offset="12" span="12">
+  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
-    <div class="gray">offset: 12, span: 12</div>
-  </van-col>
 </van-row>
 ```
 :::
 
-#### 在列元素之间增加间距
+#### 设置列元素间距
 
-列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
+通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
 
 :::demo 在列元素之间增加间距
 ```html
 <van-row gutter="20">
-  <van-col span="8">
+  <van-col span="8">span: 8</van-col>
-    <div class="gray">span: 8</div>
+  <van-col span="8">span: 8</van-col>
-  </van-col>
+  <van-col span="8">span: 8</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-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`  |   |

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

docs/src/doc.config.js

@@ -40,7 +40,7 @@ module.exports = {
         ]
       },
       {
-        "name": "Vant组件",
+        "name": "组件列表",
         "showInMobile": true,
         "groups": [
           {

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"
   }
 }

packages/col/src/col.vue

@@ -13,27 +13,28 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: 'van-col',
+  name: 'van-col',
-    props: {
+
-      span: [Number, String],
+  props: {
-      offset: [Number, String],
+    span: [Number, String],
-      prefix: {
+    offset: [Number, String],
-        type: String,
+    prefix: {
-        default: 'van'
+      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;
-      }
     }
-  };
+  },
+
+  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>

packages/row/src/row.vue

@@ -1,32 +1,31 @@
 <template>
-  <div
+  <div :class="`${prefix}-row`" :style="style">
-    :class="`${prefix}-row`"
-    :style="style">
     <slot></slot>
   </div>
 </template>
 
 <script>
-  export default {
+export default {
-    name: 'van-row',
+  name: 'van-row',
-    props: {
+
-      prefix: {
+  props: {
-        type: String,
+    prefix: {
-        default: 'van'
+      type: String,
-      },
+      default: 'van'
-      gutter: {
-        type: [Number, String],
-        default: 0
-      }
     },
-    computed: {
+    gutter: {
-      style() {
+      type: [Number, String],
-        const gutter = Number(this.gutter);
+      default: 0
-        const margin = `-${gutter / 2}px`;
-        return gutter
-          ? { marginLeft: margin, marginRight: margin }
-          : {};
-      }
     }
-  };
+  },
+
+  computed: {
+    style() {
+      const margin = `-${Number(this.gutter) / 2}px`;
+      return this.gutter
+        ? { marginLeft: margin, marginRight: margin }
+        : null;
+    }
+  }
+};
 </script>

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:
+zan-doc@^0.2.1:
-  version "0.2.0"
+  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.0.tgz#40b31c4f1cc5ae539853a06b30f1cb479e2edca3"
+  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"