From 9737a8b9d0434530503a8bf7e2337974b0c197e4 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 28 Jun 2019 11:16:42 +0800 Subject: [PATCH] [new feature] add grid component (#3669) --- docs/site/doc.config.js | 8 + src/button/README.md | 2 +- src/button/README.zh-CN.md | 2 +- src/cell/README.md | 4 +- src/cell/README.zh-CN.md | 4 +- src/col/README.zh-CN.md | 1 - src/dialog/README.md | 2 +- src/dialog/README.zh-CN.md | 2 +- src/dialog/demo/index.vue | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/goods-action/README.md | 4 +- src/goods-action/README.zh-CN.md | 4 +- src/grid-item/index.js | 97 ++++++++++ src/grid-item/index.less | 59 +++++++ src/grid/README.md | 133 ++++++++++++++ src/grid/README.zh-CN.md | 149 ++++++++++++++++ src/grid/demo/index.vue | 123 +++++++++++++ src/grid/index.js | 49 ++++++ src/grid/index.less | 6 + src/grid/test/__snapshots__/demo.spec.js.snap | 166 ++++++++++++++++++ .../test/__snapshots__/index.spec.js.snap | 15 ++ src/grid/test/demo.spec.js | 4 + src/grid/test/index.spec.js | 40 +++++ src/image-preview/README.md | 12 +- src/image-preview/demo/index.vue | 8 +- src/index.less | 2 + src/index.ts | 6 + src/lazyload/README.md | 4 +- src/lazyload/README.zh-CN.md | 4 +- src/lazyload/demo/index.vue | 16 +- src/swipe/README.md | 4 +- src/swipe/README.zh-CN.md | 4 +- src/swipe/demo/index.vue | 8 +- .../test/__snapshots__/demo.spec.js.snap | 8 +- src/tabbar/README.md | 2 +- src/tabbar/README.zh-CN.md | 2 +- 36 files changed, 907 insertions(+), 51 deletions(-) create mode 100644 src/grid-item/index.js create mode 100644 src/grid-item/index.less create mode 100644 src/grid/README.md create mode 100644 src/grid/README.zh-CN.md create mode 100644 src/grid/demo/index.vue create mode 100644 src/grid/index.js create mode 100644 src/grid/index.less create mode 100644 src/grid/test/__snapshots__/demo.spec.js.snap create mode 100644 src/grid/test/__snapshots__/index.spec.js.snap create mode 100644 src/grid/test/demo.spec.js create mode 100644 src/grid/test/index.spec.js diff --git a/docs/site/doc.config.js b/docs/site/doc.config.js index 410f8b6fc..be123d3b8 100644 --- a/docs/site/doc.config.js +++ b/docs/site/doc.config.js @@ -269,6 +269,10 @@ export default { groupName: '导航组件', icon: 'https://img.yzcdn.cn/vant/nav-0401.svg', list: [ + { + path: '/grid', + title: 'Grid 宫格' + }, { path: '/index-bar', title: 'IndexBar 索引栏' @@ -591,6 +595,10 @@ export default { groupName: 'Navigation Components', icon: 'https://img.yzcdn.cn/vant/nav-0401.svg', list: [ + { + path: '/grid', + title: 'Grid' + }, { path: '/index-bar', title: 'IndexBar' diff --git a/src/button/README.md b/src/button/README.md index 934bdd4e2..cc8a4d7e1 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -95,7 +95,7 @@ Vue.use(Button); | loading-type | Loading type, can be set to `spinner` | `String` | `circular` | | loading-size | Loading icon size | `String` | `20px` | | url | Link URL | `String` | - | -| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | ### Events diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 9338b183e..2adb64027 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -112,7 +112,7 @@ Vue.use(Button); | loading-type | 加载图标类型，可选值为`spinner` | `String` | `circular` | 2.0.0 | | loading-size | 加载图标大小 | `String` | `20px` | 1.6.7 | | url | 跳转链接 | `String` | - | 1.6.5 | -| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | 1.6.5 | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | 1.6.5 | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | 1.6.5 | ### Events diff --git a/src/cell/README.md b/src/cell/README.md index 45e72c887..03bbf02a0 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -113,7 +113,7 @@ Vue.use(Cell).use(CellGroup); | border | Whether to show inner border | `Boolean` | `true` | | center | Whether to center content vertically | `Boolean` | `true` | | url | Link URL | `String` | - | -| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | | clickable | Whether to show click feedback when clicked | `Boolean` | `false` | | is-link | Whether to show link icon | `Boolean` | `false` | @@ -128,7 +128,7 @@ Vue.use(Cell).use(CellGroup); | Event | Description | Arguments | |------|------|------| -| click | Triggered when click cell | - | +| click | Triggered when click cell | event: Event | ### Cell Slots diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index d998e5d94..3baf64999 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -117,7 +117,7 @@ Vue.use(Cell).use(CellGroup); | label | 标题下方的描述信息 | `String` | - | - | | size | 单元格大小，可选值为 `large` | `String` | - | 1.4.4 | | url | 跳转链接 | `String` | - | - | -| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - | | border | 是否显示内边框 | `Boolean` | `true` | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | | clickable | 是否开启点击反馈 | `Boolean` | `false` | - | @@ -134,7 +134,7 @@ Vue.use(Cell).use(CellGroup); | 事件名 | 说明 | 回调参数 | |------|------|------| -| click | 点击单元格时触发 | - | +| click | 点击单元格时触发 | event: Event | ### Cell Slots diff --git a/src/col/README.zh-CN.md b/src/col/README.zh-CN.md index ed8f96fe5..bc442e3b5 100644 --- a/src/col/README.zh-CN.md +++ b/src/col/README.zh-CN.md @@ -4,7 +4,6 @@ Layout 提供了`van-row`和`van-col`两个组件来进行行列布局 - ### 引入 ``` javascript diff --git a/src/dialog/README.md b/src/dialog/README.md index 4dd543cbd..eacbdcb64 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -86,7 +86,7 @@ If you need to render vue components within a dialog, you can use dialog compone title="Title" show-cancel-button > - + ``` diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 280731986..2a5254420 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -112,7 +112,7 @@ export default { title="标题" show-cancel-button > - + ``` diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue index 43485e183..f87cdffc7 100644 --- a/src/dialog/demo/index.vue +++ b/src/dialog/demo/index.vue @@ -79,7 +79,7 @@ export default { return { show: false, currentRate: 0, - image: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg' + image: 'https://img.yzcdn.cn/vant/apple-3.jpg' }; }, diff --git a/src/dialog/test/__snapshots__/demo.spec.js.snap b/src/dialog/test/__snapshots__/demo.spec.js.snap index 4db6952d1..0e32cfd65 100644 --- a/src/dialog/test/__snapshots__/demo.spec.js.snap +++ b/src/dialog/test/__snapshots__/demo.spec.js.snap @@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = ` diff --git a/src/goods-action/README.md b/src/goods-action/README.md index 30863ed21..bbc9750f1 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -104,7 +104,7 @@ Use `info` prop to show messages in upper right corner of icon | icon-class | Icon class name | `any` | `''` | | info | Info message | `String | Number` | - | | url | Link | `String` | - | -| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | ### GoodsActionButton Props @@ -117,5 +117,5 @@ Use `info` prop to show messages in upper right corner of icon | disabled | Whether to disable button | `Boolean` | `false` | | loading | Whether show loading status | `Boolean` | `false` | | url | Link | `String` | - | -| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 3d572ccee..7e490b8c5 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -104,7 +104,7 @@ export default { | icon-class | 图标额外类名 | `any` | - | - | | info | 图标右上角提示信息 | `String | Number` | - | - | | url | 跳转链接 | `String` | - | - | -| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | ### GoodsActionButton Props @@ -116,5 +116,5 @@ export default { | disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 | | loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 | | url | 跳转链接 | `String` | - | - | -| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | diff --git a/src/grid-item/index.js b/src/grid-item/index.js new file mode 100644 index 000000000..7c651e3df --- /dev/null +++ b/src/grid-item/index.js @@ -0,0 +1,97 @@ +import { createNamespace, suffixPx } from '../utils'; +import { ChildrenMixin } from '../mixins/relation'; +import { route, routeProps } from '../utils/router'; +import Icon from '../icon'; + +const [createComponent, bem] = createNamespace('grid-item'); + +export default createComponent({ + mixins: [ChildrenMixin('vanGrid')], + + props: { + ...routeProps, + icon: String, + text: String + }, + + computed: { + style() { + const { square, gutter, columnNum } = this.parent; + const percent = `${100 / columnNum}%`; + + const style = { + flexBasis: percent + }; + + if (square) { + style.paddingTop = percent; + } else if (gutter) { + const gutterValue = suffixPx(gutter); + style.paddingRight = gutterValue; + + if (this.index >= columnNum) { + style.marginTop = gutterValue; + } + } + + return style; + }, + + contentStyle() { + const { square, gutter } = this.parent; + + if (square && gutter) { + const gutterValue = suffixPx(gutter); + + return { + right: gutterValue, + bottom: gutterValue, + height: 'auto' + }; + } + } + }, + + methods: { + onClick(event) { + this.$emit('click', event); + route(this.$router, this); + }, + + renderContent() { + const slot = this.slots(); + + if (slot) { + return slot; + } + + return [ + this.slots('icon') || (this.icon && ), + this.slots('text') || (this.text && {this.text}) + ]; + } + }, + + render(h) { + const { center, border, square, gutter, clickable } = this.parent; + + return ( +
+
+ {this.renderContent()} +
+
+ ); + } +}); diff --git a/src/grid-item/index.less b/src/grid-item/index.less new file mode 100644 index 000000000..2c702b236 --- /dev/null +++ b/src/grid-item/index.less @@ -0,0 +1,59 @@ +@import '../style/var'; + +.van-grid-item { + position: relative; + box-sizing: border-box; + + &--square { + height: 0; + } + + &__content { + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100%; + padding: 15px 10px; + background-color: #fff; + + &::after { + z-index: 1; + border-width: 0 1px 1px 0; + } + + &--square { + position: absolute; + top: 0; + right: 0; + left: 0; + } + + &--center { + align-items: center; + justify-content: center; + } + + &--surround { + &::after { + border-width: 1px; + } + } + + &--clickable:active { + background-color: @active-color; + } + } + + &__icon { + font-size: 28px; + } + + &__text { + color: @gray-darker; + font-size: 12px; + } + + &__icon + &__text { + margin-top: 8px; + } +} diff --git a/src/grid/README.md b/src/grid/README.md new file mode 100644 index 000000000..fcf6bccdf --- /dev/null +++ b/src/grid/README.md @@ -0,0 +1,133 @@ +# Grid + +### Install + +``` javascript +import { Grid, GridItem } from 'vant'; + +Vue.use(Grid).use(GridItem); +``` + +## Usage + +### Basic Usage + +```html + + + +``` + +### Column Num + +```html + + + +``` + +### Custom Content + +```html + + + + + + + + + + + +``` + +### Square + +```html + + + +``` + +### Gutter + +```html + + + +``` + +### Route + +```html + + + + +``` + +## API + +### Grid Props + +| Attribute | Description | Type | Default | +|------|------|------|------|------| +| column-num | Column Num | `Number` | `4` | +| gutter | Gutter | `String | Number` | `0` | +| border | Whether to show border | `Boolean` | `true` | +| center | Whether to center content | `Boolean` | `true` | +| square | Whether to be square shape | `Boolean` | `false` | +| clickable | Whether to show click feedback when clicked | `Boolean` | `false` | + +### GridItem Props + +| Attribute | Description | Type | Default | +|------|------|------|------|------| +| text | Text | `String` | - | +| icon | Icon name or URL | `String` | - | +| url | Link URL | `String` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | +| replace | If true, the navigation will not leave a history record | `Boolean` | `false` | + +### GridItem Events + +| Event | Description | Arguments | +|------|------|------| +| click | Triggered when clicked | event: Event | + +### GridItem Slots + +| Name | Description | +|------|------| +| default | Custom content | +| icon | Custom icon | +| text | Custom text | diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md new file mode 100644 index 000000000..4d862be56 --- /dev/null +++ b/src/grid/README.zh-CN.md @@ -0,0 +1,149 @@ +# Grid 宫格 + +### 介绍 + +宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航 + +### 引入 + +``` javascript +import { Grid, GridItem } from 'vant'; + +Vue.use(Grid).use(GridItem); +``` + +## 代码演示 + +### 基本用法 + +通过`icon`属性设置格子内的图标，`text`属性设置文字内容 + +```html + + + +``` + +### 自定义列数 + +默认一行展示四个格子，可以通过`column-num`自定义列数 + +```html + + + +``` + +### 自定义内容 + +通过插槽可以自定义格子展示的内容 + +```html + + + + + + + + + + + +``` + +### 正方形格子 + +设置`square`属性后，格子的高度会和宽度保持一致 + +```html + + + +``` + +### 格子间距 + +通过`gutter`属性设置格子之间的距离 + +```html + + + +``` + +### 页面导航 + +通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接 + +```html + + + + +``` + +## API + +### Grid Props + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|------|------|------|------|------| +| column-num | 列数 | `Number` | `4` | 2.0.4 | +| gutter | 格子之间的间距，默认单位为`px` | `String | Number` | `0` | - | +| border | 是否显示边框 | `Boolean` | `true` | - | +| center | 是否将格子内容居中显示 | `Boolean` | `true` | - | +| square | 是否将格子固定为正方形 | `Boolean` | `false` | - | +| clickable | 是否开启格子点击反馈 | `Boolean` | `false` | - | + +### GridItem Props + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|------|------|------|------|------| +| text | 文字 | `String` | - | - | +| icon | 图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - | +| url | 跳转链接 | `String` | - | - | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - | +| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | + +### GridItem Events + +| 事件名 | 说明 | 回调参数 | +|------|------|------| +| click | 点击格子时触发 | event: Event | + +### GridItem Slots + +| 名称 | 说明 | +|------|------| +| default | 自定义宫格的所有内容 | +| icon | 自定义图标 | +| text | 自定义文字 | diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue new file mode 100644 index 000000000..e5e1cffe0 --- /dev/null +++ b/src/grid/demo/index.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/src/grid/index.js b/src/grid/index.js new file mode 100644 index 000000000..48ab8630a --- /dev/null +++ b/src/grid/index.js @@ -0,0 +1,49 @@ +import { createNamespace, suffixPx } from '../utils'; +import { ParentMixin } from '../mixins/relation'; + +const [createComponent, bem] = createNamespace('grid'); + +export default createComponent({ + mixins: [ParentMixin('vanGrid')], + + props: { + gutter: Number, + square: Boolean, + clickable: Boolean, + columnNum: { + type: Number, + default: 4 + }, + center: { + type: Boolean, + default: true + }, + border: { + type: Boolean, + default: true + } + }, + + computed: { + style() { + const { gutter } = this; + + if (gutter) { + return { + paddingLeft: suffixPx(gutter) + }; + } + } + }, + + render(h) { + return ( +
+ {this.slots()} +
+ ); + } +}); diff --git a/src/grid/index.less b/src/grid/index.less new file mode 100644 index 000000000..47a890003 --- /dev/null +++ b/src/grid/index.less @@ -0,0 +1,6 @@ +@import '../style/var'; + +.van-grid { + display: flex; + flex-wrap: wrap; +} diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap new file mode 100644 index 000000000..524b85630 --- /dev/null +++ b/src/grid/test/__snapshots__/demo.spec.js.snap @@ -0,0 +1,166 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders demo correctly 1`] = ` +
+
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+ 文字
+
+
+
+
+
+
+
+ 路由跳转
+
+
+
+ URL 跳转
+
+
+
+
+`; diff --git a/src/grid/test/__snapshots__/index.spec.js.snap b/src/grid/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..9390f65ef --- /dev/null +++ b/src/grid/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`sqaure and set gutter 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/src/grid/test/demo.spec.js b/src/grid/test/demo.spec.js new file mode 100644 index 000000000..d647cfabc --- /dev/null +++ b/src/grid/test/demo.spec.js @@ -0,0 +1,4 @@ +import Demo from '../demo'; +import demoTest from '../../../test/demo-test'; + +demoTest(Demo); diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js new file mode 100644 index 000000000..a403ad27e --- /dev/null +++ b/src/grid/test/index.spec.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import Grid from '..'; +import GridItem from '../../grid-item'; +import { mount } from '../../../test/utils'; + +Vue.use(Grid); +Vue.use(GridItem); + +test('click grid item', () => { + const onClick = jest.fn(); + const wrapper = mount({ + template: ` + + + + `, + methods: { + onClick + } + }); + + const Item = wrapper.find('.van-grid-item'); + Item.trigger('click'); + + expect(onClick).toHaveBeenCalledTimes(1); +}); + +test('sqaure and set gutter', () => { + const wrapper = mount({ + template: ` + + + + + + ` + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 37475a022..bd5b76290 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -14,8 +14,8 @@ Vue.use(ImagePreview); ```javascript ImagePreview([ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ]); ``` @@ -24,8 +24,8 @@ ImagePreview([ ```javascript ImagePreview({ images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ], startPosition: 1, onClose() { @@ -39,8 +39,8 @@ ImagePreview({ ```javascript const instance = ImagePreview({ images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ], asyncClose: true }); diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index 7becfbfca..5cf77ac27 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -49,10 +49,10 @@ import { ImagePreview } from '../..'; const images = [ - 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg', + 'https://img.yzcdn.cn/vant/apple-3.jpg', + 'https://img.yzcdn.cn/vant/apple-4.jpg' ]; export default { diff --git a/src/index.less b/src/index.less index b445ed6a4..745413ffc 100644 --- a/src/index.less +++ b/src/index.less @@ -8,6 +8,8 @@ /* common components */ @import './col/index'; @import './row/index'; +@import './grid/index'; +@import './grid-item/index'; @import './image/index'; @import './circle/index'; @import './collapse-item/index'; diff --git a/src/index.ts b/src/index.ts index c72e316ab..491319b9d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,8 @@ import Field from './field'; import GoodsAction from './goods-action'; import GoodsActionButton from './goods-action-button'; import GoodsActionIcon from './goods-action-icon'; +import Grid from './grid'; +import GridItem from './grid-item'; import Icon from './icon'; import Image from './image'; import ImagePreview from './image-preview'; @@ -115,6 +117,8 @@ const components = [ GoodsAction, GoodsActionButton, GoodsActionIcon, + Grid, + GridItem, Icon, Image, ImagePreview, @@ -206,6 +210,8 @@ export { GoodsAction, GoodsActionButton, GoodsActionIcon, + Grid, + GridItem, Icon, Image, ImagePreview, diff --git a/src/lazyload/README.md b/src/lazyload/README.md index d930d9e6d..22c8fd892 100644 --- a/src/lazyload/README.md +++ b/src/lazyload/README.md @@ -22,8 +22,8 @@ export default { data() { return { imageList: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ] }; } diff --git a/src/lazyload/README.zh-CN.md b/src/lazyload/README.zh-CN.md index 2ae94e406..b9f7fbe8a 100644 --- a/src/lazyload/README.zh-CN.md +++ b/src/lazyload/README.zh-CN.md @@ -27,8 +27,8 @@ export default { data() { return { imageList: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ] }; } diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue index 437c2c85c..cbee1f8dd 100644 --- a/src/lazyload/demo/index.vue +++ b/src/lazyload/demo/index.vue @@ -41,18 +41,18 @@ export default { data() { return { imageList: [ - 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg', + 'https://img.yzcdn.cn/vant/apple-3.jpg', + 'https://img.yzcdn.cn/vant/apple-4.jpg' ], backgroundImageList: [ - 'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg' + 'https://img.yzcdn.cn/vant/apple-5.jpg', + 'https://img.yzcdn.cn/vant/apple-6.jpg' ], componentImageList: [ - 'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg' + 'https://img.yzcdn.cn/vant/apple-8.jpg', + 'https://img.yzcdn.cn/vant/apple-7.jpg' ] }; } diff --git a/src/swipe/README.md b/src/swipe/README.md index 98ef1c752..2b6dd84d5 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -40,8 +40,8 @@ export default { data() { return { images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ] } } diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index b79de5e49..ee9381a76 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -40,8 +40,8 @@ export default { data() { return { images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg' ] } } diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue index ac3049b32..e6dc06b2b 100644 --- a/src/swipe/demo/index.vue +++ b/src/swipe/demo/index.vue @@ -103,10 +103,10 @@ export default { return { current: 0, images: [ - 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg', - 'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg' + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg', + 'https://img.yzcdn.cn/vant/apple-3.jpg', + 'https://img.yzcdn.cn/vant/apple-4.jpg' ] }; }, diff --git a/src/swipe/test/__snapshots__/demo.spec.js.snap b/src/swipe/test/__snapshots__/demo.spec.js.snap index 42c3038f9..92aa87521 100644 --- a/src/swipe/test/__snapshots__/demo.spec.js.snap +++ b/src/swipe/test/__snapshots__/demo.spec.js.snap @@ -16,10 +16,10 @@ exports[`renders demo correctly 1`] = `
-
-
-
-
+
+
+
+
diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 0e4de2e05..679ce9eaa 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -164,7 +164,7 @@ export default { | dot | Whether to show red dot | `Boolean` | - | | info | Info message | `String | Number` | - | | url | Link | `String` | - | -| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | +| to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | ### TabbarItem Slots diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index c3dbb2682..2b7a1caca 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -170,7 +170,7 @@ export default { | dot | 是否显示小红点 | `Boolean` | - | - | | info | 图标右上角提示信息 | `String | Number` | - | - | | url | 跳转链接 | `String` | - | - | -| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | +| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | ### TabbarItem Slots