mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: Grid component
This commit is contained in:
chenjiahan
parent
3bf64717b5
commit
660e535811
151
src-next/grid-item/index.js
Normal file
151
src-next/grid-item/index.js
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
// Utils
|
||||||
|
import { createNamespace, addUnit } from '../utils';
|
||||||
|
import { BORDER } from '../utils/constant';
|
||||||
|
import { route, routeProps } from '../utils/router';
|
||||||
|
|
||||||
|
// Mixins
|
||||||
|
import { ChildrenMixin } from '../mixins/relation';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Info from '../info';
|
||||||
|
import Icon from '../icon';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('grid-item');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ChildrenMixin('vanGrid')],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
...routeProps,
|
||||||
|
dot: Boolean,
|
||||||
|
text: String,
|
||||||
|
icon: String,
|
||||||
|
iconPrefix: String,
|
||||||
|
badge: [Number, String],
|
||||||
|
},
|
||||||
|
|
||||||
|
emits: ['click'],
|
||||||
|
|
||||||
|
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 = addUnit(gutter);
|
||||||
|
style.paddingRight = gutterValue;
|
||||||
|
|
||||||
|
if (this.index >= columnNum) {
|
||||||
|
style.marginTop = gutterValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
|
||||||
|
contentStyle() {
|
||||||
|
const { square, gutter } = this.parent;
|
||||||
|
|
||||||
|
if (square && gutter) {
|
||||||
|
const gutterValue = addUnit(gutter);
|
||||||
|
|
||||||
|
return {
|
||||||
|
right: gutterValue,
|
||||||
|
bottom: gutterValue,
|
||||||
|
height: 'auto',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
this.$emit('click', event);
|
||||||
|
route(this.$router, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
genIcon() {
|
||||||
|
if (this.$slots.icon) {
|
||||||
|
return (
|
||||||
|
<div class={bem('icon-wrapper')}>
|
||||||
|
{this.$slots.icon()}
|
||||||
|
<Info dot={this.dot} info={this.badge} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.icon) {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
name={this.icon}
|
||||||
|
dot={this.dot}
|
||||||
|
info={this.badge}
|
||||||
|
size={this.parent.iconSize}
|
||||||
|
class={bem('icon')}
|
||||||
|
classPrefix={this.iconPrefix}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getText() {
|
||||||
|
if (this.$slots.text) {
|
||||||
|
return this.$slots.text();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.text) {
|
||||||
|
return <span class={bem('text')}>{this.text}</span>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
genContent() {
|
||||||
|
if (this.$slots.default) {
|
||||||
|
return this.$slots.default();
|
||||||
|
}
|
||||||
|
|
||||||
|
return [this.genIcon(), this.getText()];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
center,
|
||||||
|
border,
|
||||||
|
square,
|
||||||
|
gutter,
|
||||||
|
direction,
|
||||||
|
clickable,
|
||||||
|
} = this.parent;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={[bem({ square })]} style={this.style}>
|
||||||
|
<div
|
||||||
|
style={this.contentStyle}
|
||||||
|
role={clickable ? 'button' : null}
|
||||||
|
tabindex={clickable ? 0 : null}
|
||||||
|
class={[
|
||||||
|
bem('content', [
|
||||||
|
direction,
|
||||||
|
{
|
||||||
|
center,
|
||||||
|
square,
|
||||||
|
clickable,
|
||||||
|
surround: border && gutter,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
{ [BORDER]: border },
|
||||||
|
]}
|
||||||
|
onClick={this.onClick}
|
||||||
|
>
|
||||||
|
{this.genContent()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
78
src-next/grid-item/index.less
Normal file
78
src-next/grid-item/index.less
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-grid-item {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&--square {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
font-size: @grid-item-icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
color: @grid-item-text-color;
|
||||||
|
font-size: @grid-item-text-font-size;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon + &__text {
|
||||||
|
margin-top: @padding-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
padding: @grid-item-content-padding;
|
||||||
|
background-color: @grid-item-content-background-color;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
z-index: 1;
|
||||||
|
border-width: 0 @border-width-base @border-width-base 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--square {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--center {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.van-grid-item__icon + .van-grid-item__text {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: @padding-xs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--surround {
|
||||||
|
&::after {
|
||||||
|
border-width: @border-width-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: @grid-item-content-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
134
src-next/grid/README.md
Normal file
134
src-next/grid/README.md
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
# Grid
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Grid, GridItem } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Grid);
|
||||||
|
Vue.use(GridItem);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid>
|
||||||
|
<van-grid-item icon="photo-o" text="Text" />
|
||||||
|
<van-grid-item icon="photo-o" text="Text" />
|
||||||
|
<van-grid-item icon="photo-o" text="Text" />
|
||||||
|
<van-grid-item 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Horizontal
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid direction="horizontal" :column-num="2">
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item icon="photo-o" 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="/vant/mobile.html" />
|
||||||
|
</van-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show Badge
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid :column-num="2">
|
||||||
|
<van-grid-item icon="home-o" text="Text" dot />
|
||||||
|
<van-grid-item icon="search" text="Text" badge="99+" />
|
||||||
|
</van-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Grid Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| column-num `v2.0.4` | Column Num | _number \| string_ | `4` |
|
||||||
|
| icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` |
|
||||||
|
| gutter | Gutter | _number \| string_ | `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` |
|
||||||
|
| direction `v2.8.2` | Content arrangement direction, can be set to `horizontal` | _string_ | `vertical` |
|
||||||
|
|
||||||
|
### GridItem Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| text | Text | _string_ | - |
|
||||||
|
| icon | Icon name or URL | _string_ | - |
|
||||||
|
| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
|
||||||
|
| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
|
||||||
|
| badge `v2.5.6` | Content of the badge | _number \| 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 |
|
||||||
155
src-next/grid/README.zh-CN.md
Normal file
155
src-next/grid/README.zh-CN.md
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
# Grid 宫格
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Grid, GridItem } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Grid);
|
||||||
|
Vue.use(GridItem);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid>
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 内容横排
|
||||||
|
|
||||||
|
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid direction="horizontal" :column-num="2">
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item icon="photo-o" text="文字" />
|
||||||
|
<van-grid-item 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="/vant/mobile.html" />
|
||||||
|
</van-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 徽标提示
|
||||||
|
|
||||||
|
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-grid :column-num="2">
|
||||||
|
<van-grid-item icon="home-o" text="文字" dot />
|
||||||
|
<van-grid-item icon="search" text="文字" badge="99+" />
|
||||||
|
</van-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Grid Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| column-num `v2.0.4` | 列数 | _number \| string_ | `4` |
|
||||||
|
| icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
|
||||||
|
| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
|
||||||
|
| border | 是否显示边框 | _boolean_ | `true` |
|
||||||
|
| center | 是否将格子内容居中显示 | _boolean_ | `true` |
|
||||||
|
| square | 是否将格子固定为正方形 | _boolean_ | `false` |
|
||||||
|
| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
|
||||||
|
| direction `v2.8.2` | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` |
|
||||||
|
|
||||||
|
### GridItem Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| text | 文字 | _string_ | - |
|
||||||
|
| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||||
|
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
||||||
|
| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
|
||||||
|
| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
|
||||||
|
| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
|
||||||
|
| url | 点击后跳转的链接地址 | _string_ | - |
|
||||||
|
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
|
||||||
|
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
|
||||||
|
|
||||||
|
### GridItem Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------ | -------------- | -------------- |
|
||||||
|
| click | 点击格子时触发 | _event: Event_ |
|
||||||
|
|
||||||
|
### GridItem Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
| ------- | -------------------- |
|
||||||
|
| default | 自定义宫格的所有内容 |
|
||||||
|
| icon | 自定义图标 |
|
||||||
|
| text | 自定义文字 |
|
||||||
131
src-next/grid/demo/index.vue
Normal file
131
src-next/grid/demo/index.vue
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<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('horizontal')">
|
||||||
|
<van-grid direction="horizontal" :column-num="3">
|
||||||
|
<van-grid-item icon="photo-o" :text="t('text')" />
|
||||||
|
<van-grid-item icon="photo-o" :text="t('text')" />
|
||||||
|
<van-grid-item 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="/vant/mobile.html"
|
||||||
|
/>
|
||||||
|
</van-grid>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('showBadge')">
|
||||||
|
<van-grid :column-num="2">
|
||||||
|
<van-grid-item icon="home-o" :text="t('text')" dot />
|
||||||
|
<van-grid-item icon="search" :text="t('text')" badge="99+" />
|
||||||
|
</van-grid>
|
||||||
|
</demo-block>
|
||||||
|
</demo-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
i18n: {
|
||||||
|
'zh-CN': {
|
||||||
|
text: '文字',
|
||||||
|
route: '页面导航',
|
||||||
|
gutter: '格子间距',
|
||||||
|
square: '正方形格子',
|
||||||
|
columnNum: '自定义列数',
|
||||||
|
customContent: '自定义内容',
|
||||||
|
urlRoute: 'URL 跳转',
|
||||||
|
vueRoute: '路由跳转',
|
||||||
|
showBadge: '徽标提示',
|
||||||
|
horizontal: '内容横排',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
text: 'Text',
|
||||||
|
route: 'Route',
|
||||||
|
gutter: 'Gutter',
|
||||||
|
square: 'Square',
|
||||||
|
columnNum: 'Column Num',
|
||||||
|
customContent: 'Custom Content',
|
||||||
|
urlRoute: 'URL',
|
||||||
|
vueRoute: 'Vue Router',
|
||||||
|
showBadge: 'Show Badge',
|
||||||
|
horizontal: 'Horizontal',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../../style/var';
|
||||||
|
</style>
|
||||||
52
src-next/grid/index.js
Normal file
52
src-next/grid/index.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { createNamespace, addUnit } from '../utils';
|
||||||
|
import { BORDER_TOP } from '../utils/constant';
|
||||||
|
import { ParentMixin } from '../mixins/relation';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('grid');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ParentMixin('vanGrid')],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
square: Boolean,
|
||||||
|
gutter: [Number, String],
|
||||||
|
iconSize: [Number, String],
|
||||||
|
direction: String,
|
||||||
|
clickable: Boolean,
|
||||||
|
columnNum: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 4,
|
||||||
|
},
|
||||||
|
center: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
style() {
|
||||||
|
const { gutter } = this;
|
||||||
|
|
||||||
|
if (gutter) {
|
||||||
|
return {
|
||||||
|
paddingLeft: addUnit(gutter),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={this.style}
|
||||||
|
class={[bem(), { [BORDER_TOP]: this.border && !this.gutter }]}
|
||||||
|
>
|
||||||
|
{this.$slots.default?.()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
6
src-next/grid/index.less
Normal file
6
src-next/grid/index.less
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
196
src-next/grid/test/__snapshots__/demo.spec.js.snap
Normal file
196
src-next/grid/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
// 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 van-image__loading-icon">
|
||||||
|
<!----></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 van-image__loading-icon">
|
||||||
|
<!----></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 van-image__loading-icon">
|
||||||
|
<!----></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: 33.333333333333336%;">
|
||||||
|
<div class="van-grid-item__content van-grid-item__content--horizontal 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--horizontal 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--horizontal 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: 50%;">
|
||||||
|
<div role="button" tabindex="0" 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 role="button" tabindex="0" 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>
|
||||||
|
<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-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
|
||||||
|
<div class="van-info van-info--dot"></div>
|
||||||
|
</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-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
|
||||||
|
<div class="van-info">99+</div>
|
||||||
|
</i><span class="van-grid-item__text">文字</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
37
src-next/grid/test/__snapshots__/index.spec.js.snap
Normal file
37
src-next/grid/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`icon-size prop 1`] = `
|
||||||
|
<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-success van-grid-item__icon" style="font-size: 10px;">
|
||||||
|
<!----></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`render icon-slot 1`] = `
|
||||||
|
<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">
|
||||||
|
<div class="van-grid-item__icon-wrapper">
|
||||||
|
<div></div>
|
||||||
|
<div class="van-info">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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-next/grid/test/demo.spec.js
Normal file
4
src-next/grid/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
60
src-next/grid/test/index.spec.js
Normal file
60
src-next/grid/test/index.spec.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
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__content');
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('icon-size prop', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-grid icon-size="10">
|
||||||
|
<van-grid-item icon="success" />
|
||||||
|
</van-grid>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render icon-slot', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-grid icon-size="10">
|
||||||
|
<van-grid-item info="1">
|
||||||
|
<div slot="icon" />
|
||||||
|
</van-grid-item>
|
||||||
|
</van-grid>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
@ -286,10 +286,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
title: '导航组件',
|
title: '导航组件',
|
||||||
items: [
|
items: [
|
||||||
// {
|
{
|
||||||
// path: 'grid',
|
path: 'grid',
|
||||||
// title: 'Grid 宫格',
|
title: 'Grid 宫格',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'index-bar',
|
// path: 'index-bar',
|
||||||
// title: 'IndexBar 索引栏',
|
// title: 'IndexBar 索引栏',
|
||||||
@ -620,10 +620,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
title: 'Navigation Components',
|
title: 'Navigation Components',
|
||||||
items: [
|
items: [
|
||||||
// {
|
{
|
||||||
// path: 'grid',
|
path: 'grid',
|
||||||
// title: 'Grid',
|
title: 'Grid',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'index-bar',
|
// path: 'index-bar',
|
||||||
// title: 'IndexBar',
|
// title: 'IndexBar',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user