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: '导航组件',
|
||||
items: [
|
||||
// {
|
||||
// path: 'grid',
|
||||
// title: 'Grid 宫格',
|
||||
// },
|
||||
{
|
||||
path: 'grid',
|
||||
title: 'Grid 宫格',
|
||||
},
|
||||
// {
|
||||
// path: 'index-bar',
|
||||
// title: 'IndexBar 索引栏',
|
||||
@ -620,10 +620,10 @@ module.exports = {
|
||||
{
|
||||
title: 'Navigation Components',
|
||||
items: [
|
||||
// {
|
||||
// path: 'grid',
|
||||
// title: 'Grid',
|
||||
// },
|
||||
{
|
||||
path: 'grid',
|
||||
title: 'Grid',
|
||||
},
|
||||
// {
|
||||
// path: 'index-bar',
|
||||
// title: 'IndexBar',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user