From dc854a4d5682bc88bf47fedb76a619cbd624e253 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 10:33:55 +0800 Subject: [PATCH 1/8] Steps: update document --- docs/examples-docs/steps.md | 67 +++++++++++++++++++++---------------- 1 file changed, 38 insertions(+), 29 deletions(-) diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md index d9d229b4b..d41d06a3d 100644 --- a/docs/examples-docs/steps.md +++ b/docs/examples-docs/steps.md @@ -1,12 +1,17 @@ @@ -20,7 +25,7 @@ export default { methods: { nextStep() { - if (++this.active > 3) this.active = 0; + this.active = ++this.active % 4; } } } @@ -42,7 +47,7 @@ Vue.component(Steps.name, Steps); :::demo 基础用法 ```html - + 买家下单 商家接单 买家提货 @@ -61,7 +66,7 @@ export default { methods: { nextStep() { - if (++this.active > 3) this.active = 0; + this.active = ++this.active % 4; } } } @@ -69,13 +74,19 @@ export default { ``` ::: -#### 只显示步骤条 +#### 物流描述 -当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。 +通过`title`和`description`属性来定义物流描述信息 -:::demo 只显示步骤条 +:::demo 物流描述 ```html - + 买家下单 商家接单 买家提货 @@ -84,38 +95,37 @@ export default { ``` ::: -#### 竖式步骤条 +#### 竖向步骤条 -可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。 +可以通过设置`direction`属性来改变步骤条的显示方式 -:::demo 只显示步骤条 +:::demo 竖向步骤条 ```html -

【城市】最新的物流状态之类的表述哈哈哈哈

-

2016-07-12 12:12:12

+

【城市】物流状态1

+

2016-07-12 12:40

 -

【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999

-

2016-07-12 12:12:12

+

【城市】物流状态2

+

2016-07-11 10:00

 -

未发货

-

2016-07-12 12:12:12

+

快件已发货

+

2016-07-10 09:30

 ``` ::: ### 高级用法 - -可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。 +使用`slot`增加自定义内容 :::demo 高级用法 ```html - -

流程

+ +

物流进度

买家下单 商家接单 买家提货 @@ -128,13 +138,13 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| active | 当前激活的步骤，从0开始 | `number` | | | -| icon | 当前步骤的icon | `string` | | | -| iconClass | 当前步骤栏为icon添加的类 | `string` | | | -| title | 当前步骤从标题 | `string` | | | -| description | 当前步骤描述 | `string` | | | -| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` | -| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | | +| active | 当前步骤，起始值为0 | `Number` | | | +| icon | 当前步骤的icon | `String` | | | +| iconClass | 当前步骤栏为icon添加的类 | `String` | | | +| title | 当前步骤从标题 | `String` | | | +| description | 当前步骤描述 | `String` | | | +| direction | 显示方向 | `String` | `horizontal` | `vertical` | +| activeColor | active状态颜色 | `String` | `#06bf04` | | ### Steps Slot @@ -142,4 +152,3 @@ export default { |-----------|-----------| | icon | 自定义icon区域 | | message-extra | 状态栏添加额外的元素 | - From 7574962af6ef164ea859376f3779b2b86c434340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 10:34:02 +0800 Subject: [PATCH 2/8] Loading: update document --- docs/examples-docs/loading.md | 53 +++++++------------------------ packages/vant-css/src/loading.css | 9 ++---- 2 files changed, 15 insertions(+), 47 deletions(-) diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md index 098e7001d..8a9dcffc2 100644 --- a/docs/examples-docs/loading.md +++ b/docs/examples-docs/loading.md @@ -1,19 +1,8 @@ @@ -29,39 +18,21 @@ Vue.component(Loading.name, Loading); ### 代码演示 -#### 渐变深色spinner +#### 单色 spinner -:::demo 渐变深色spinner +:::demo 单色 spinner ```html - + + ``` ::: -#### 渐变浅色spinner +#### 渐变色 spinner -:::demo 渐变浅色spinner +:::demo 渐变色 spinner ```html -
- -
- - -``` -::: - -#### 单色spinner - -:::demo 单色spinner -```html - - + + ``` ::: @@ -69,5 +40,5 @@ Vue.component(Loading.name, Loading); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| color | `loading`颜色 | `string` | `black` | `black`, `white` | -| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` | +| color | 颜色 | `string` | `black` | `black` `white` | +| type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` | diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css index 1fd4c337e..5aa53f468 100644 --- a/packages/vant-css/src/loading.css +++ b/packages/vant-css/src/loading.css @@ -10,8 +10,6 @@ } .van-loading { - - line-height: 0; font-size: 0; &--circle { @@ -26,11 +24,10 @@ } &__spinner { - display: inline-block; - height: 100%; width: 100%; - animation: van-loading 0.8s linear; - animation-iteration-count: infinite; + height: 100%; + display: inline-block; + animation: van-loading 0.8s linear infinite; &--circle { border-radius: 100%; From a2a8523da121e05718eaa81b7f60fd7b2f9dcbcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 10:38:05 +0800 Subject: [PATCH 3/8] update doc --- docs/src/ExamplesApp.vue | 10 ++++------ docs/src/components/demo-block.vue | 2 ++ docs/src/components/demo-list.vue | 2 +- docs/src/examples.js | 7 +++---- docs/src/index.js | 5 ++--- packages/field/index.vue | 13 ++++++------- 6 files changed, 18 insertions(+), 21 deletions(-) diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue index 78dd05c34..fd1f2215a 100644 --- a/docs/src/ExamplesApp.vue +++ b/docs/src/ExamplesApp.vue @@ -54,11 +54,6 @@ export default { @@ -20,44 +24,37 @@ Vue.component(Tag.name, Tag); ### 代码演示 #### 基础用法 - -`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。 - +通过 type 属性控制 Tag 颜色，默认为灰色 :::demo 基础用法 ```html -
- 返现 -
-
- 返现 - 四字标签 - 一 -
+标签 +标签 +标签 +标签 ``` ::: -#### 高级用法 +#### 空心样式 +设置`plain`属性设置为空心样式 -设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。 - -:::demo 高级用法 +:::demo 空心样式 ```html -
- 返现 - 返现 -
-
- 返现 - 返现 -
-
- 返现 - 返现 -
-
- 返现 - 返现 -
+标签 +标签 +标签 +标签 +``` +::: + +#### 标记样式 +通过`mark`设置为标记样式 + +:::demo 标记样式 +```html +标签 +标签 +标签 +标签 ``` ::: @@ -65,12 +62,12 @@ Vue.component(Tag.name, Tag); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| plain | 是否是空心tag | `boolean` | `false` | | -| mark | 是否是标记 | `boolean` | `false` | | -| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` | +| type | 类型 | `String` | `''`| `primary` `success` `danger` | +| plain | 是否为空心样式 | `Boolean` | `false` | | +| mark | 是否为标记样式 | `Boolean` | `false` | | ### Slot | name | 描述 | |-----------|-----------| -| - | 自定义tag显示内容 | +| - | 自定义 Tag 显示内容 | diff --git a/packages/tag/index.vue b/packages/tag/index.vue index e24bf0990..4fd9ad45d 100644 --- a/packages/tag/index.vue +++ b/packages/tag/index.vue @@ -1,21 +1,21 @@ From aff5da68e45194ccdc73cb8a0ab9c813974a7853 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 11:29:47 +0800 Subject: [PATCH 5/8] Badge: update document --- docs/examples-docs/badge.md | 99 +++++++++++++++++++------------------ packages/badge/index.vue | 18 ++----- 2 files changed, 56 insertions(+), 61 deletions(-) diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md index b0f27058c..6da67fc0c 100644 --- a/docs/examples-docs/badge.md +++ b/docs/examples-docs/badge.md @@ -1,29 +1,36 @@ ## Badge 徽章 @@ -39,48 +46,44 @@ Vue.component(Badge.name, Badge); #### 基础用法 -默认情况下激活第一个`badge`。 +通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge` :::demo 基础用法 ```html -
- - - - - - -
+ + + + + + +``` + +``` javascript +export default { + data() { + return { + activeKey: 0 + }; + }, + methods: { + onClick(key) { + this.activeKey = key; + } + } +}; ``` ::: -#### 选中某个badge -如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。 +### BadgeGroup API -:::demo 选中某个badge -```html -
- - - - - - -
-``` -::: - -### z-badge-group API - -| 参数 | 说明 | 类型 | 默认值 | 必须 | +| 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | | +| active-key | 选中`badge`的索引 | `String | Number` | `0` | - | - -### z-badge API -| 参数 | 说明 | 类型 | 默认值 | 必须 | +### Badge API +| 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| title | badge的文案标题 | `string` | `''` | `required` | -| info | 当前badge的提示消息 | `string` | `''` | | -| url | 跳转链接 | `string` | 链接直接跳转或者hash | | +| title | 内容 | `String` | `''` | - | +| info | 提示消息 | `String` | `''` | - | +| url | 跳转链接 | `String` | - | - | diff --git a/packages/badge/index.vue b/packages/badge/index.vue index 7808d6755..9ed36df14 100644 --- a/packages/badge/index.vue +++ b/packages/badge/index.vue @@ -1,12 +1,8 @@ @@ -40,12 +36,8 @@ export default { }, methods: { - handleClick(e) { - this.$emit('click', e, { - title: this.title, - url: this.url, - info: this.info - }); + onClick() { + this.$emit('click', this.$parent.badges.indexOf(this)); } } }; From 3de9f86b47c433c904a042bd3a1aa284cfb52f13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 15:18:54 +0800 Subject: [PATCH 6/8] Doc: update component document && examples --- docs/examples-docs/button.md | 10 +- docs/examples-docs/card.md | 38 +++--- docs/examples-docs/cell-swipe.md | 27 ++-- docs/examples-docs/cell.md | 82 ++++++------- docs/examples-docs/icon.md | 183 ++++++++++++++-------------- docs/examples-docs/image-preview.md | 16 ++- docs/examples-docs/layout.md | 10 +- docs/examples-docs/notice-bar.md | 6 +- docs/examples-docs/panel.md | 62 ++-------- docs/examples-docs/popup.md | 12 +- docs/src/ExamplesApp.vue | 62 +++++----- packages/cell/index.vue | 6 +- packages/panel/index.vue | 2 +- packages/vant-css/src/badge.css | 4 +- packages/vant-css/src/cell.css | 4 + packages/vant-css/src/loading.css | 1 + 16 files changed, 243 insertions(+), 282 deletions(-) diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index 91761fff0..a5bfd47d2 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -114,8 +114,8 @@ Vue.component(Button.name, Button); | type | 按钮类型 | `String` | `default` | `primary` `danger` | | size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` | | tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 | -| nativeType | 按钮类型（原生） | `String` | `''` | | -| diabled | 是否禁用 | `Boolean` | `false` | | -| loading | 是否显示为加载状态 | `Boolean` | `false` | | -| block | 是否为块级元素 | `Boolean` | `false` | | -| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | | +| nativeType | 按钮类型（原生） | `String` | `''` | - | +| diabled | 是否禁用 | `Boolean` | `false` | - | +| loading | 是否显示为加载状态 | `Boolean` | `false` | - | +| block | 是否为块级元素 | `Boolean` | `false` | - | +| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - | diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md index 993c39f6d..2c586a78a 100644 --- a/docs/examples-docs/card.md +++ b/docs/examples-docs/card.md @@ -1,3 +1,13 @@ + + ## Card 图文组件 ### 使用指南 @@ -11,15 +21,9 @@ Vue.component(Card.name, Card); #### 基础用法 -当没有底部按钮时，右侧内容会居中显示。 - :::demo 基础用法 ```html - - + ``` ::: @@ -29,10 +33,9 @@ Vue.component(Card.name, Card); :::demo 高级用法 ```html - +
-

商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余

+

商品名称

¥ 2.00
@@ -50,11 +53,10 @@ Vue.component(Card.name, Card); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| thumb | 左侧图片 | `string` | | | -| title | 标题 | `string` | | | -| desc | 描述 | `string` | | | -| centered | 内容是否垂直居中 | `string` | `false` | | - +| thumb | 左侧图片 | `String` | - | - | +| title | 标题 | `String` | - | - | +| desc | 描述 | `String` | - | - | +| centered | 内容是否垂直居中 | `String` | `false` | - | ### Slot @@ -62,6 +64,6 @@ Vue.component(Card.name, Card); |-----------|-----------| | title | 自定义标题 | | desc | 自定义描述 | -| tags | 自定义tags | -| thumb | 自定义thumb | -| footer | 自定义footer | +| tags | 自定义 tags | +| thumb | 自定义 thumb | +| footer | 自定义 footer | diff --git a/docs/examples-docs/cell-swipe.md b/docs/examples-docs/cell-swipe.md index 45225aabd..a16494da7 100644 --- a/docs/examples-docs/cell-swipe.md +++ b/docs/examples-docs/cell-swipe.md @@ -1,6 +1,6 @@ ## CellSwipe 滑动单元格 @@ -36,22 +32,21 @@ Vue.component(CellSwipe.name, CellSwipe); :::demo 基础用法 ```html + 选择 - 删除 - 选择 + 删除 ``` ::: - ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| left-width | 左侧滑动按钮宽度 | `number` | 0 | | -| right-width | 右侧滑动按钮宽度 | `number` | 0 | | +| left-width | 左侧滑动区域宽度 | `Number` | `0` | - | +| right-width | 右侧滑动区域宽度 | `Number` | `0` | - | ### Slot diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md index b2566b15a..bbad3c505 100644 --- a/docs/examples-docs/cell.md +++ b/docs/examples-docs/cell.md @@ -8,6 +8,21 @@ export default { }; + + ## Cell 单元格 ### 使用指南 @@ -22,86 +37,66 @@ Vue.component(CellGroup.name, CellGroup); #### 基础用法 -你可以将`van-cell-group`组件看成一个容器即可。 +将`van-cell-group`组件看成一个容器即可 :::demo 基础用法 ```html - + ``` ::: #### 只设置value - -只设置`value`时会向左对齐。 +只设置`value`时会向左对齐 :::demo 只设置value ```html - - + ``` ::: -#### 标题带描述信息 - -传入`label`属性，属性值为描述信息的值。 - -:::demo 标题带描述信息 +#### 展示图标 +通过`icon`属性在标题左侧展示图标 +:::demo 展示图标 ```html - - + ``` ::: -#### 带图标 +#### 展示箭头 +传入`isLink`属性则会在右侧显示箭头 -传入`icon`属性。 - -:::demo 带图标 +:::demo 展示箭头 ```html - - - -``` -::: - -#### 可点击的链接 - -传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 - -:::demo 可点击的链接 -```html - - - + + ``` ::: #### 高级用法 - -如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`、`icon`、`title`和`right-icon`的`slot`。 +如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容 :::demo 高级用法 ```html - + - + @@ -112,12 +107,13 @@ Vue.component(CellGroup.name, CellGroup); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| icon | 左侧图标 | `string` | | | -| title | 左侧标题 | `string` | | | -| value | 右侧内容 | `string` | | | -| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | | -| url | 跳转链接 | `string` | | | -| label | 描述信息，显示在标题下方 | `string` | | | +| icon | 左侧图标 | `String` | - | - | +| title | 左侧标题 | `String` | - | - | +| value | 右侧内容 | `String` | - | - | +| label | 标题下方的描述信息 | `String` | - | - | +| url | 跳转链接 | `String` | - | - | +| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - | +| required | 是否显示表单必填符号 | `Boolean` | `false` | - | ### Slot diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md index a2278a668..a6c572e82 100644 --- a/docs/examples-docs/icon.md +++ b/docs/examples-docs/icon.md @@ -8,13 +8,14 @@ .van-col { text-align: center; - height: 120px; + height: 100px; float: none; display: inline-block; + color: rgba(69, 90, 100, .8); } .van-icon { - font-size: 45px; + font-size: 32px; margin: 15px 0; display: block; } @@ -29,15 +30,99 @@ import Vue from 'vue'; import { Icon } from 'packages'; +const icons = [ + 'close', + 'location', + 'clock', + 'gold-coin', + 'chat', + 'exchange', + 'upgrade', + 'edit', + 'contact', + 'passed', + 'points', + 'delete', + 'records', + 'logistics', + 'check', + 'checked', + 'gift', + 'like-o', + 'like', + 'qr', + 'qr-invalid', + 'shop', + 'photograph', + 'add', + 'add2', + 'photo', + 'cart', + 'arrow', + 'search', + 'clear', + 'success', + 'fail', + 'wechat', + 'alipay', + 'password-view', + 'wap-nav', + 'password-not-view', + 'wap-home', + 'ecard-pay', + 'balance-pay', + 'peer-pay', + 'credit-pay', + 'debit-pay', + 'other-pay', + 'cart', + 'browsing-history', + 'goods-collect', + 'shop-collect', + 'receive-gift', + 'send-gift', + 'setting', + 'coupon', + 'free-postage', + 'discount', + 'birthday-privilege', + 'member-day-privilege', + 'balance-details', + 'cash-back-record', + 'points-mall', + 'exchange-record', + 'pending-payment', + 'pending-orders', + 'pending-deliver', + 'pending-evaluate', + 'cash-on-deliver', + 'gift-card-pay', + 'underway', + 'point-gift', + 'after-sale', + 'edit-data', + 'question', + 'description', + 'card', + 'gift-card', + 'coupon' +]; + Vue.component('van-icon-inner', Icon); Vue.component('van-icon', { props: ['name'], render(h) { - return - - {this.name} - + return ( +
+ {icons.map(icon => ( + + + {icon} + + ))} +
+ ) } }); @@ -57,7 +142,7 @@ Vue.component(Icon.name, Icon); #### 基础用法 -设置`name`属性为对应的图标名称即可： +设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表 :::demo 基础用法 ```html @@ -65,90 +150,8 @@ Vue.component(Icon.name, Icon); ``` ::: -#### 图标列表 - -:::demo 所有Icon -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -::: - ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| name | icon名称 | `string` | `''` | | +| name | icon名称 | `String` | `''` | - | diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md index 1239abd78..0de221cb1 100644 --- a/docs/examples-docs/image-preview.md +++ b/docs/examples-docs/image-preview.md @@ -11,7 +11,7 @@ import { ImagePreview } from 'packages/index'; export default { methods: { - handleImagePreview() { + showImagePreview() { ImagePreview([ 'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', @@ -38,22 +38,20 @@ import { ImagePreview } from 'vant'; :::demo 基础用法 ```html -预览图片 - - ``` ::: diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index 67d32b869..2fe09d2a9 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -79,12 +79,12 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 #### Row | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | | -| prefix | className 前缀 | `String` | `van` | | +| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - | +| prefix | className 前缀 | `String` | `van` | - | #### Column | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| span | 列元素宽度 | `String | Number` | - | | -| offset | 列元素偏移距离 | `String | Number` | - | | -| prefix | className 前缀 | `String` | `van` | | +| span | 列元素宽度 | `String | Number` | - | - | +| offset | 列元素偏移距离 | `String | Number` | - | - | +| prefix | className 前缀 | `String` | `van` | - | diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md index eaccdde97..7da1faa12 100644 --- a/docs/examples-docs/notice-bar.md +++ b/docs/examples-docs/notice-bar.md @@ -58,9 +58,9 @@ Vue.component(NoticeBar.name, NoticeBar); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | mode | 通告栏模式 | String | `''` | `closeable` `link` | -| delay | 动画延迟时间，单位秒 | Number | `1` | | -| scrollable | 是否滚动 | Boolean | `true` | | -| speed | 滚动速率，单位px | Number | `40` | | +| delay | 动画延迟时间，单位秒 | Number | `1` | - | +| speed | 滚动速率，单位px | Number | `40` | - | +| scrollable | 是否滚动 | Boolean | `true` | - | ### Event diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md index 899cb071e..ee7612ae6 100644 --- a/docs/examples-docs/panel.md +++ b/docs/examples-docs/panel.md @@ -1,19 +1,6 @@ diff --git a/packages/cell/index.vue b/packages/cell/index.vue index f356c8aa9..3bcf14a33 100644 --- a/packages/cell/index.vue +++ b/packages/cell/index.vue @@ -2,7 +2,7 @@
@@ -14,10 +14,10 @@
diff --git a/packages/panel/index.vue b/packages/panel/index.vue index 37003010c..eed3760d7 100644 --- a/packages/panel/index.vue +++ b/packages/panel/index.vue @@ -10,7 +10,7 @@
-
+
diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css index 854c9d6b8..d79285264 100644 --- a/packages/vant-css/src/badge.css +++ b/packages/vant-css/src/badge.css @@ -32,9 +32,7 @@ display: block; } &::after { - @mixin border-retina (top); - @mixin border-retina (right); - @mixin border-retina (left); + @mixin border-retina (top, right, left); } } diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css index 5bc960596..8b381dd41 100644 --- a/packages/vant-css/src/cell.css +++ b/packages/vant-css/src/cell.css @@ -37,6 +37,10 @@ &__title { display: table-cell; + + .van-icon { + margin-right: 5px; + } } &__label { diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css index 5aa53f468..704897bf4 100644 --- a/packages/vant-css/src/loading.css +++ b/packages/vant-css/src/loading.css @@ -11,6 +11,7 @@ .van-loading { font-size: 0; + line-height: 0; &--circle { width: 16px; From 13a41e0e1e8d979aca75fd6a05edb09282c455b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 15:53:11 +0800 Subject: [PATCH 7/8] OrderGoods: fix message test cases --- docs/examples-docs/order-goods.md | 6 +++++ packages/order-goods/Empty.vue | 8 +------ packages/order-goods/index.vue | 1 + test/unit/get-webpack-conf.js | 2 +- test/unit/specs/order-goods.spec.js | 34 ++++++++++++++--------------- 5 files changed, 25 insertions(+), 26 deletions(-) diff --git a/docs/examples-docs/order-goods.md b/docs/examples-docs/order-goods.md index f88a36717..3c882555f 100644 --- a/docs/examples-docs/order-goods.md +++ b/docs/examples-docs/order-goods.md @@ -221,6 +221,12 @@ export default { | is_period_buy | 是否为周期购 | `Boolean` | | show_delivery_time | 是否显示发货时间 | `Boolean` | +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| clickEmptyButton | 点击商品为空时的按钮时触发 | - | + ### Slot | name | 描述 | |-----------|-----------| diff --git a/packages/order-goods/Empty.vue b/packages/order-goods/Empty.vue index 7e9779908..f997cfe1a 100644 --- a/packages/order-goods/Empty.vue +++ b/packages/order-goods/Empty.vue @@ -2,7 +2,7 @@

{{ message }}

- {{ buttonText }} + {{ buttonText }}
@@ -20,12 +20,6 @@ export default { icon: String, message: String, buttonText: String - }, - - methods: { - onClickButton() { - history.back(); - } } }; diff --git a/packages/order-goods/index.vue b/packages/order-goods/index.vue index 05dad6558..56f808ecb 100644 --- a/packages/order-goods/index.vue +++ b/packages/order-goods/index.vue @@ -12,6 +12,7 @@ :icon="emptyIcon" :message="emptyMessage" :button-text="emptyButtonText" + @clickEmptyButton="$emit('clickEmptyButton')" />
{ } }); + const submitSpyFunc = sinon.spy(); + wrapper.vm.$on('clickEmptyButton', submitSpyFunc); + wrapper.find('.van-button')[0].trigger('click'); DOMChecker(wrapper, { @@ -87,6 +90,8 @@ describe('OrderGoods', () => { '.van-order-goods-empty img': 'http://b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png' } }); + + expect(submitSpyFunc.calledOnce).to.be.true; }); it('empty list config', () => { @@ -110,7 +115,7 @@ describe('OrderGoods', () => { }); }); - it('edit message', () => { + it('edit message', (done) => { wrapper = mount(OrderGoods, { attachToDocument: true, propsData: { @@ -120,16 +125,14 @@ describe('OrderGoods', () => { }); wrapper.vm.$on('input', val => { - wrapper.value = val; + wrapper.vm.message = val; + expect(wrapper.vm.message).to.equal('测试留言'); + done(); }); const textarea = wrapper.find('textarea')[0]; - textarea.value = '测试留言'; + textarea.element.value = '测试留言'; textarea.trigger('input'); - - wrapper.vm.$nextTick(() => { - expect(wrapper.value).to.equal('测试留言'); - }); }); it('message not editable', () => { @@ -159,16 +162,10 @@ describe('OrderGoods', () => { } }); - wrapper.vm.$on('input', val => { - wrapper.value = val; - }); - - wrapper.vm.$nextTick(() => { - DOMChecker(wrapper, { - text: { - '.van-order-goods-message p': '无' - } - }); + DOMChecker(wrapper, { + text: { + '.van-order-goods-message p': '' + } }); }); @@ -262,7 +259,7 @@ describe('OrderGoods', () => { }); }); - it('item with message', () => { + it('item with message', (done) => { wrapper = mount(OrderGoods, { attachToDocument: true, propsData: { @@ -293,6 +290,7 @@ describe('OrderGoods', () => { } } }); + done(); }, 300); }); From 7c857d8bb2135a2b9d61f9b16d616fe8b7d47f8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 31 Aug 2017 15:56:37 +0800 Subject: [PATCH 8/8] update dependencies --- package.json | 10 +++++----- yarn.lock | 30 +++++++++++++++--------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 0d3d08093..a7ea9f6c7 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "license": "ISC", "dependencies": { "babel-runtime": "6.x", - "vue-lazyload": "^1.0.6" + "vue-lazyload": "^1.1.2" }, "peerDependencies": { "vue": "2.4.2" @@ -65,7 +65,7 @@ "cheerio": "^0.22.0", "codecov": "^2.2.0", "cross-env": "^5.0.5", - "css-loader": "^0.28.5", + "css-loader": "^0.28.7", "eslint-plugin-vue": "^2.1.0", "extract-text-webpack-plugin": "2.0.0", "felint": "^0.5.0-alpha.3", @@ -81,12 +81,12 @@ "html-webpack-plugin": "^2.29.0", "isparta-loader": "^2.0.0", "json-templater": "^1.0.4", - "karma": "^1.7.0", + "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.4", - "karma-sinon-chai": "^1.2.4", + "karma-sinon-chai": "^1.3.2", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "^0.0.31", "karma-webpack": "^2.0.4", @@ -117,6 +117,6 @@ "webpack": "^3.5.5", "webpack-dev-server": "^2.7.1", "webpack-merge": "^4.1.0", - "zan-doc": "^0.2.9" + "zan-doc": "^0.2.10" } } diff --git a/yarn.lock b/yarn.lock index e49b9ee00..4ce6cd205 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1823,9 +1823,9 @@ css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" -css-loader@^0.28.5: - version "0.28.5" - resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.5.tgz#dd02bb91b94545710212ef7f6aaa66663113d754" +css-loader@^0.28.7: + version "0.28.7" + resolved "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b" dependencies: babel-code-frame "^6.11.0" css-selector-tokenizer "^0.7.0" @@ -4255,9 +4255,9 @@ karma-phantomjs-launcher@^1.0.4: lodash "^4.0.1" phantomjs-prebuilt "^2.1.7" -karma-sinon-chai@^1.2.4: - version "1.3.1" - resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.3.1.tgz#4633419494d9e2d848787dd76053031859f5b7f5" +karma-sinon-chai@^1.3.2: + version "1.3.2" + resolved "https://registry.npmjs.org/karma-sinon-chai/-/karma-sinon-chai-1.3.2.tgz#ea4d97b16433e64813aaddddded7f7bb4338215e" dependencies: lolex "^1.6.0" @@ -4283,9 +4283,9 @@ karma-webpack@^2.0.4: source-map "^0.1.41" webpack-dev-middleware "^1.0.11" -karma@^1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269" +karma@^1.7.1: + version "1.7.1" + resolved "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae" dependencies: bluebird "^3.3.0" body-parser "^1.16.1" @@ -7618,9 +7618,9 @@ vue-html-loader@^1.2.4: loader-utils "^1.0.2" object-assign "^4.1.0" -vue-lazyload@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.6.tgz#7d5494fc35c35fc84dcc271165b827e309b4e793" +vue-lazyload@^1.1.2: + version "1.1.2" + resolved "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.1.2.tgz#86e0de01edd70596abc22d1017eea2f2b28e5efd" vue-loader@^13.0.4: version "13.0.4" @@ -7970,9 +7970,9 @@ yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" -zan-doc@^0.2.9: - version "0.2.9" - resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.9.tgz#9d8787f2a6502686f3c44dc4ced9d8ca0fbe3d4e" +zan-doc@^0.2.10: + version "0.2.10" + resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.10.tgz#eb08f72100a873dd8ae0b2eb7f7454d3ff256322" dependencies: cheerio "0.22.0" decamelize "^1.2.0"