Merge pull request #85 from chenjiahan/dev

Layout: optimize doc
2025-04-06 03:57:59 +08:00 · 2017-08-22 17:13:02 +08:00 · 2017-08-22 17:13:02 +08:00 · 6e979d1fb3
commit 6e979d1fb3
parent bafe9142ea 15569b0e51
8 changed files with 102 additions and 113 deletions
--- 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;
+    font-size: 13px;
    line-height: 30px;
-    font-size: 12px;
-    background: #fff;
-    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">
-    <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`  |   |
--- 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
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@ -40,7 +40,7 @@ module.exports = {
        ]
      },
      {
-        "name": "Vant组件",
+        "name": "组件列表",
        "showInMobile": true,
        "groups": [
          {
--- a/docs/src/index.js
+++ b/docs/src/index.js
@ -6,11 +6,11 @@ import ZanDoc from 'zan-doc';
 import DemoBlock from './components/demo-block';
 import 'packages/vant-css/src/index.css';

-function isMobile() {
+const isMobile = (function() {
  var platform = navigator.userAgent.toLowerCase();
  return (/(android|bb\d+|meego).+mobile|kdtunion|weibo|m2oapp|micromessenger|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i).test(platform) ||
    (/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(platform.substr(0, 4));
-}
+})();

 Vue.use(VueRouter);
 Vue.use(ZanDoc);
@ -29,15 +29,20 @@ const router = new VueRouter({
 });

 router.beforeEach((route, redirect, next) => {
-  const pathname = '/zanui/vue/examples';
-  if (isMobile()) {
-    window.location.replace(pathname);
+  if (isMobile) {
+    window.location.replace('/zanui/vue/examples');
    return;
  }
  document.title = route.meta.title || document.title;
  next();
 });

+router.afterEach(() => {
+  if (!isMobile) {
+    window.scrollTo(0, 0);
+  }
+})
+
 new Vue({ // eslint-disable-line
  render: h => h(App),
  router
--- 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"
  }
 }
--- 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 }
+        : {};
+    }
+  }
+};
 </script>
--- 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 }
+        : {};
+    }
+  }
+};
 </script>
--- 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"