mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] add grid component (#3669)
This commit is contained in:
neverland
GitHub
parent
1850230102
commit
9737a8b9d0
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
|
||||
@ -86,7 +86,7 @@ If you need to render vue components within a dialog, you can use dialog compone
|
||||
title="Title"
|
||||
show-cancel-button
|
||||
>
|
||||
<img src="https://img.yzcdn.cn/1.jpg">
|
||||
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
|
||||
@ -112,7 +112,7 @@ export default {
|
||||
title="标题"
|
||||
show-cancel-button
|
||||
>
|
||||
<img src="https://img.yzcdn.cn/1.jpg">
|
||||
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
|
||||
@ -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'
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</span></button>
|
||||
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header">标题</div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"></div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
97
src/grid-item/index.js
Normal file
97
src/grid-item/index.js
Normal file
@ -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 && <Icon name={this.icon} class={bem('icon')} />),
|
||||
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { center, border, square, gutter, clickable } = this.parent;
|
||||
|
||||
return (
|
||||
<div class={[bem({ square })]} style={this.style} onClick={this.onClick}>
|
||||
<div
|
||||
style={this.contentStyle}
|
||||
class={[
|
||||
bem('content', {
|
||||
center,
|
||||
square,
|
||||
clickable,
|
||||
surround: border && gutter
|
||||
}),
|
||||
{ 'van-hairline': border }
|
||||
]}
|
||||
>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
59
src/grid-item/index.less
Normal file
59
src/grid-item/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
133
src/grid/README.md
Normal file
133
src/grid/README.md
Normal file
@ -0,0 +1,133 @@
|
||||
# Grid
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Grid, GridItem } from 'vant';
|
||||
|
||||
Vue.use(Grid).use(GridItem);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
<van-grid-item
|
||||
v-for="value in 4"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="Text"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Column Num
|
||||
|
||||
```html
|
||||
<van-grid :column-num="3">
|
||||
<van-grid-item
|
||||
v-for="value in 6"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="Text"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
```html
|
||||
<van-grid :border="false" :column-num="3">
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Square
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
<van-grid-item
|
||||
v-for="value in 8"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="Text"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Gutter
|
||||
|
||||
```html
|
||||
<van-grid :gutter="10">
|
||||
<van-grid-item
|
||||
v-for="value in 8"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="Text"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Route
|
||||
|
||||
```html
|
||||
<van-grid clickable :column-num="2">
|
||||
<van-grid-item
|
||||
icon="home-o"
|
||||
text="Vue Router"
|
||||
to="/"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="search"
|
||||
text="URL"
|
||||
url="https://www.baidu.com"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
## 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 |
|
||||
149
src/grid/README.zh-CN.md
Normal file
149
src/grid/README.zh-CN.md
Normal file
@ -0,0 +1,149 @@
|
||||
# Grid 宫格
|
||||
|
||||
### 介绍
|
||||
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Grid, GridItem } from 'vant';
|
||||
|
||||
Vue.use(Grid).use(GridItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基本用法
|
||||
|
||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
<van-grid-item
|
||||
v-for="value in 4"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="文字"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 自定义列数
|
||||
|
||||
默认一行展示四个格子，可以通过`column-num`自定义列数
|
||||
|
||||
```html
|
||||
<van-grid :column-num="3">
|
||||
<van-grid-item
|
||||
v-for="value in 6"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="文字"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过插槽可以自定义格子展示的内容
|
||||
|
||||
```html
|
||||
<van-grid :border="false" :column-num="3">
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 正方形格子
|
||||
|
||||
设置`square`属性后，格子的高度会和宽度保持一致
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
<van-grid-item
|
||||
v-for="value in 8"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="文字"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过`gutter`属性设置格子之间的距离
|
||||
|
||||
```html
|
||||
<van-grid :gutter="10">
|
||||
<van-grid-item
|
||||
v-for="value in 8"
|
||||
:key="value"
|
||||
icon="photo-o"
|
||||
text="文字"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 页面导航
|
||||
|
||||
通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接
|
||||
|
||||
```html
|
||||
<van-grid clickable :column-num="2">
|
||||
<van-grid-item
|
||||
icon="home-o"
|
||||
text="路由跳转"
|
||||
to="/"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="search"
|
||||
text="URL 跳转"
|
||||
url="https://www.baidu.com"
|
||||
/>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
## 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 | 自定义文字 |
|
||||
123
src/grid/demo/index.vue
Normal file
123
src/grid/demo/index.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-grid>
|
||||
<van-grid-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('columnNum')">
|
||||
<van-grid :column-num="3">
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customContent')">
|
||||
<van-grid
|
||||
:border="false"
|
||||
:column-num="3"
|
||||
>
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-3.jpg"
|
||||
/>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('square')">
|
||||
<van-grid square>
|
||||
<van-grid-item
|
||||
v-for="i in 8"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('gutter')">
|
||||
<van-grid :gutter="10">
|
||||
<van-grid-item
|
||||
v-for="i in 8"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('route')">
|
||||
<van-grid
|
||||
clickable
|
||||
:column-num="2"
|
||||
>
|
||||
<van-grid-item
|
||||
icon="home-o"
|
||||
:text="$t('vueRoute')"
|
||||
to="/"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="search"
|
||||
:text="$t('urlRoute')"
|
||||
url="https://www.baidu.com"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '文字',
|
||||
route: '页面导航',
|
||||
gutter: '格子间距',
|
||||
square: '正方形格子',
|
||||
columnNum: '自定义列数',
|
||||
customContent: '自定义内容',
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
route: 'Route',
|
||||
gutter: 'Gutter',
|
||||
square: 'Square',
|
||||
columnNum: 'Column Num',
|
||||
customContent: 'Custom Content',
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
</style>
|
||||
49
src/grid/index.js
Normal file
49
src/grid/index.js
Normal file
@ -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 (
|
||||
<div
|
||||
style={this.style}
|
||||
class={[bem(), { 'van-hairline--top': this.border && !this.gutter }]}
|
||||
>
|
||||
{this.slots()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
6
src/grid/index.less
Normal file
6
src/grid/index.less
Normal file
@ -0,0 +1,6 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
166
src/grid/test/__snapshots__/demo.spec.js.snap
Normal file
166
src/grid/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,166 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid">
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center">
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center">
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center">
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid" style="padding-left: 10px;">
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">路由跳转</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">URL 跳转</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
15
src/grid/test/__snapshots__/index.spec.js.snap
Normal file
15
src/grid/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,15 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`sqaure and set gutter 1`] = `
|
||||
<div class="van-grid" style="padding-left: 10rem;">
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
4
src/grid/test/demo.spec.js
Normal file
4
src/grid/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
40
src/grid/test/index.spec.js
Normal file
40
src/grid/test/index.spec.js
Normal file
@ -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: `
|
||||
<van-grid>
|
||||
<van-grid-item @click="onClick" />
|
||||
</van-grid>
|
||||
`,
|
||||
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: `
|
||||
<van-grid square :column-num="2" gutter="10rem">
|
||||
<van-grid-item />
|
||||
<van-grid-item />
|
||||
<van-grid-item />
|
||||
</van-grid>
|
||||
`
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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'
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
@ -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'
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
@ -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'
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
@ -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'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
@ -16,10 +16,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-swipe">
|
||||
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
|
||||
</div>
|
||||
<div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user