From d76db3d74aeb8db9d1c1e358d62a9f0885fdfe9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 22 Aug 2017 13:31:36 +0800 Subject: [PATCH 1/4] 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 @@ ## 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 - -
span: 8
- - -
span: 8
- - -
span: 8
- + span: 8 + span: 8 + span: 8 + - -
span: 4
- - -
offset: 4, span: 10
- + span: 4 + offset: 4, span: 10 + - -
offset: 12, span: 12
- + offset: 12, span: 12 ``` ::: -#### 在列元素之间增加间距 +#### 设置列元素间距 -列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。 +通过`gutter`属性可以设置列元素之间的间距，默认间距为 0 :::demo 在列元素之间增加间距 ```html - -
span: 8
- - -
span: 8
- - -
span: 8
- + span: 8 + span: 8 + span: 8 ``` ::: @@ -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 @@ 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 @@ 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" From c4b0aebc75bf07086167e4bfb48ca021a0cc6a07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 22 Aug 2017 13:33:37 +0800 Subject: [PATCH 2/4] Layout: adjust font size --- docs/examples-docs/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index 93762dbeb..67d32b869 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -5,7 +5,7 @@ } .van-col { color: #fff; - font-size: 12px; + font-size: 13px; line-height: 30px; text-align: center; margin-bottom: 10px; From 96a90097a500ce25957a198463c6f4d639c64616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 22 Aug 2017 13:41:42 +0800 Subject: [PATCH 3/4] Doc: fix scroll position --- docs/src/index.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/src/index.js b/docs/src/index.js index 43f769edf..8b19eb7c9 100644 --- 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 From 15569b0e510d75ef5139d76f0153e81cd43276ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 22 Aug 2017 14:15:43 +0800 Subject: [PATCH 4/4] fix: Col empty style --- packages/col/src/col.vue | 2 +- packages/row/src/row.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue index 281d0995e..4f1ed8cfe 100644 --- a/packages/col/src/col.vue +++ b/packages/col/src/col.vue @@ -33,7 +33,7 @@ export default { const padding = `${this.gutter / 2}px`; return this.gutter ? { paddingLeft: padding, paddingRight: padding } - : null; + : {}; } } }; diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue index 374cc793a..0e4a6ae69 100644 --- a/packages/row/src/row.vue +++ b/packages/row/src/row.vue @@ -24,7 +24,7 @@ export default { const margin = `-${Number(this.gutter) / 2}px`; return this.gutter ? { marginLeft: margin, marginRight: margin } - : null; + : {}; } } };