mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Grid): add Grid component (#2016)
This commit is contained in:
ShuaiKang Zhang
neverland
parent
dc73f32661
commit
b9228ba3ea
@ -55,7 +55,8 @@
|
||||
"pages/collapse/index",
|
||||
"pages/picker/index",
|
||||
"pages/overlay/index",
|
||||
"pages/circle/index"
|
||||
"pages/circle/index",
|
||||
"pages/grid/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#f8f8f8",
|
||||
@ -115,7 +116,9 @@
|
||||
"van-collapse-item": "./dist/collapse-item/index",
|
||||
"van-picker": "./dist/picker/index",
|
||||
"van-overlay": "./dist/overlay/index",
|
||||
"van-circle": "./dist/circle/index"
|
||||
"van-circle": "./dist/circle/index",
|
||||
"van-grid": "./dist/grid/index",
|
||||
"van-grid-item": "./dist/grid-item/index"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
|
||||
@ -155,6 +155,10 @@ export default [
|
||||
groupName: '导航组件',
|
||||
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/grid',
|
||||
title: 'Grid 宫格'
|
||||
},
|
||||
{
|
||||
path: '/sidebar',
|
||||
title: 'Sidebar 侧边导航'
|
||||
|
||||
3
example/pages/grid/index.js
Normal file
3
example/pages/grid/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page();
|
||||
3
example/pages/grid/index.json
Normal file
3
example/pages/grid/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Grid 宫格"
|
||||
}
|
||||
38
example/pages/grid/index.wxml
Normal file
38
example/pages/grid/index.wxml
Normal file
@ -0,0 +1,38 @@
|
||||
<demo-block title="基本用法">
|
||||
<van-grid>
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 4 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义列数">
|
||||
<van-grid column-num="3">
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义内容">
|
||||
<van-grid column-num="3" border="{{ false }}">
|
||||
<van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
|
||||
<image class="van-image" src="https://img.yzcdn.cn/vant/apple-{{ index+1 }}.jpg" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="正方形格子">
|
||||
<van-grid square>
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="格子间距">
|
||||
<van-grid gutter="{{ 10 }}">
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="页面跳转">
|
||||
<van-grid clickable column-num="2">
|
||||
<van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转"></van-grid-item>
|
||||
<van-grid-item icon="search" link-type="reLaunch" url="/pages/dashboard/index" text="ReLaunch 跳转"></van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
4
example/pages/grid/index.wxss
Normal file
4
example/pages/grid/index.wxss
Normal file
@ -0,0 +1,4 @@
|
||||
.van-image {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
@ -19,6 +19,20 @@
|
||||
@background-color: #f8f8f8;
|
||||
@background-color-light: #fafafa;
|
||||
|
||||
// Padding
|
||||
@padding-base: 4px;
|
||||
@padding-xs: @padding-base * 2;
|
||||
@padding-sm: @padding-base * 3;
|
||||
@padding-md: @padding-base * 4;
|
||||
@padding-lg: @padding-base * 6;
|
||||
@padding-xl: @padding-base * 8;
|
||||
|
||||
// Font Size
|
||||
@font-size-xs: 10px;
|
||||
@font-size-sm: 12px;
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
|
||||
// Button
|
||||
@button-default-color: @text-color;
|
||||
@button-default-background-color: @white;
|
||||
@ -171,3 +185,11 @@
|
||||
|
||||
// iPhoneX
|
||||
@safe-area-inset-bottom: 34px;
|
||||
|
||||
// GridItem
|
||||
@grid-item-content-padding: @padding-md @padding-xs;
|
||||
@grid-item-content-background-color: @white;
|
||||
@grid-item-content-active-color: @active-color;
|
||||
@grid-item-icon-size: 26px;
|
||||
@grid-item-text-color: @gray-darker;
|
||||
@grid-item-text-font-size: @font-size-sm;
|
||||
|
||||
6
packages/grid-item/index.json
Normal file
6
packages/grid-item/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
57
packages/grid-item/index.less
Normal file
57
packages/grid-item/index.less
Normal file
@ -0,0 +1,57 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-grid-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--square {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&__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 1px 1px 0;
|
||||
}
|
||||
|
||||
&--surround {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--square {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--clickable:active {
|
||||
background-color: @grid-item-content-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: @grid-item-icon-size;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: @grid-item-text-color;
|
||||
font-size: @grid-item-text-font-size;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
66
packages/grid-item/index.ts
Normal file
66
packages/grid-item/index.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import { link } from '../mixins/link';
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
relation: {
|
||||
name: 'grid',
|
||||
type: 'ancestor',
|
||||
linked(parent) {
|
||||
this.parent = parent;
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [link],
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
text: String,
|
||||
useSlot: Boolean
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateStyle();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateStyle() {
|
||||
if (!this.parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, children } = this.parent;
|
||||
const { columnNum, border, square, gutter, clickable, center } = data;
|
||||
const width = `${100 / columnNum}%`;
|
||||
|
||||
const styleWrapper: Array<string> = [];
|
||||
styleWrapper.push(`width: ${width}`);
|
||||
|
||||
if (square) {
|
||||
styleWrapper.push(`padding-top: ${width}`);
|
||||
}
|
||||
|
||||
if (gutter) {
|
||||
styleWrapper.push(`padding-right: ${gutter}px`);
|
||||
}
|
||||
|
||||
const index = children.indexOf(this);
|
||||
if (index >= columnNum) {
|
||||
styleWrapper.push(`margin-top: ${gutter}px`);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
style: styleWrapper.join('; '),
|
||||
center,
|
||||
border,
|
||||
square,
|
||||
gutter,
|
||||
clickable
|
||||
});
|
||||
},
|
||||
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
this.jumpLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
19
packages/grid-item/index.wxml
Normal file
19
packages/grid-item/index.wxml
Normal file
@ -0,0 +1,19 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="{{ utils.bem('grid-item', { square }) }}" style="{{ style }}" bindtap="onClick">
|
||||
<view class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}">
|
||||
<block wx:if="{{ useSlot }}">
|
||||
<slot />
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="van-grid-item__icon">
|
||||
<van-icon wx:if="{{ icon }}" name="{{ icon }}" />
|
||||
<slot wx:else name="icon"></slot>
|
||||
</view>
|
||||
<view class="van-grid-item__text">
|
||||
<text wx:if="{{ text }}">{{ text }}</text>
|
||||
<slot wx:else name="text"></slot>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
131
packages/grid/README.md
Normal file
131
packages/grid/README.md
Normal file
@ -0,0 +1,131 @@
|
||||
# Grid 宫格
|
||||
|
||||
### 介绍
|
||||
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-grid": "path/to/vant-weapp/dist/grid/index",
|
||||
"van-grid-item": "path/to/vant-weapp/dist/grid-item/index"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基本用法
|
||||
|
||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 4 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 自定义列数
|
||||
|
||||
默认一行展示四个格子，可以通过`column-num`自定义列数
|
||||
|
||||
```html
|
||||
<van-grid column-num="3">
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过插槽可以自定义格子展示的内容
|
||||
|
||||
```html
|
||||
<van-grid column-num="3" border="{{ false }}">
|
||||
<van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
|
||||
<image
|
||||
class="van-image"
|
||||
src="https://img.yzcdn.cn/vant/apple-{{ index+1 }}.jpg"
|
||||
/>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 正方形格子
|
||||
|
||||
设置`square`属性后，格子的高度会和宽度保持一致
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过`gutter`属性设置格子之间的距离
|
||||
|
||||
```html
|
||||
<van-grid gutter="{{ 10 }}">
|
||||
<van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 页面跳转
|
||||
|
||||
可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
|
||||
|
||||
```html
|
||||
<van-grid clickable column-num="2">
|
||||
<van-grid-item
|
||||
icon="home-o"
|
||||
link-type="navigateTo"
|
||||
url="/pages/dashboard/index"
|
||||
text="Navigate跳转"
|
||||
></van-grid-item>
|
||||
<van-grid-item
|
||||
icon="search"
|
||||
link-type="reLaunch"
|
||||
url="/pages/dashboard/index"
|
||||
text="ReLaunch跳转"
|
||||
></van-grid-item>
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Grid Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------- | ------------------------------ | ------------------ | ------- | ---- |
|
||||
| column-num | 列数 | *number* | `4` | - |
|
||||
| gutter | 格子之间的间距，默认单位为`px` | *string \| number* | `0` | - |
|
||||
| border | 是否显示边框 | *boolean* | `true` | - |
|
||||
| center | 是否将格子内容居中显示 | *boolean* | `true` | - |
|
||||
| square | 是否将格子固定为正方形 | *boolean* | `false` | - |
|
||||
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | - |
|
||||
| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ---------------------------------------------------------- | -------- | ------------ | ---- |
|
||||
| text | 文字 | *string* | - | - |
|
||||
| icon | 图标名称或图片链接，可选值见 Icon 组件 | *string* | - | - |
|
||||
| url | 跳转链接 | *string* | - | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - |
|
||||
|
||||
### GridItem Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ---------- | -------------- | -------- |
|
||||
| bind:click | 点击格子时触发 | - |
|
||||
|
||||
### GridItem Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | ---------------------------------------------------- |
|
||||
| default | 自定义宫格的所有内容，需要设置`use-slot`属性 |
|
||||
| icon | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 |
|
||||
| text | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 |
|
||||
3
packages/grid/index.json
Normal file
3
packages/grid/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
5
packages/grid/index.less
Normal file
5
packages/grid/index.less
Normal file
@ -0,0 +1,5 @@
|
||||
.van-grid {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
70
packages/grid/index.ts
Normal file
70
packages/grid/index.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
relation: {
|
||||
name: 'grid-item',
|
||||
type: 'descendant',
|
||||
linked(child) {
|
||||
this.children.push(child);
|
||||
},
|
||||
unlinked(child) {
|
||||
this.children = this.children.filter(
|
||||
(item: WechatMiniprogram.Component.TrivialInstance) => item !== child
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
square: {
|
||||
type: Boolean,
|
||||
observer: 'updateChildren'
|
||||
},
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
value: 0,
|
||||
observer: 'updateChildren'
|
||||
},
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
observer: 'updateChildren'
|
||||
},
|
||||
columnNum: {
|
||||
type: Number,
|
||||
value: 4,
|
||||
observer: 'updateChildren'
|
||||
},
|
||||
center: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: 'updateChildren'
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: 'updateChildren'
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.children = [];
|
||||
},
|
||||
|
||||
created() {
|
||||
const { gutter } = this.data;
|
||||
if (gutter) {
|
||||
this.setData({
|
||||
style: `padding-left: ${gutter}px`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateChildren() {
|
||||
this.children.forEach(
|
||||
(child: WechatMiniprogram.Component.TrivialInstance) => {
|
||||
child.updateStyle();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/grid/index.wxml
Normal file
3
packages/grid/index.wxml
Normal file
@ -0,0 +1,3 @@
|
||||
<view class="van-grid {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ style }}">
|
||||
<slot />
|
||||
</view>
|
||||
Loading…
x
Reference in New Issue
Block a user