blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(Grid): gutter not work correct with square (#2394)

Browse Source 
fix #2373
This commit is contained in:
rex 2019-11-26 20:59:39 +08:00 committed by GitHub
parent 69c83bc539
commit 0d95eae0ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grid-item/index.ts
View File

@ -1,5 +1,6 @@
import { link } from '../mixins/link'; import { link } from '../mixins/link';
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { addUnit } from '../common/utils';
VantComponent({ VantComponent({
relation: { relation: {
@ -34,7 +35,7 @@ VantComponent({
const { columnNum, border, square, gutter, clickable, center } = data; const { columnNum, border, square, gutter, clickable, center } = data;
const width = `${100 / columnNum}%`; const width = `${100 / columnNum}%`;
const styleWrapper: Array<string> = []; const styleWrapper = [];
styleWrapper.push(`width: ${width}`); styleWrapper.push(`width: ${width}`);
if (square) { if (square) {
@ -42,16 +43,30 @@ VantComponent({
} }
if (gutter) { if (gutter) {
styleWrapper.push(`padding-right: ${gutter}px`); const gutterValue = addUnit(gutter);
styleWrapper.push(`padding-right: ${gutterValue}`);
const index = children.indexOf(this); const index = children.indexOf(this);
if (index >= columnNum) { if (index >= columnNum) {
styleWrapper.push(`margin-top: ${gutter}px`); styleWrapper.push(`margin-top: ${gutterValue}`);
} }
} }
let contentStyle = '';
if (square && gutter) {
const gutterValue = addUnit(gutter);
contentStyle = `
right: ${gutterValue};
bottom: ${gutterValue};
height: auto;
`;
}
this.setData({ this.setData({
style: styleWrapper.join('; '), style: styleWrapper.join('; '),
contentStyle,
center, center,
border, border,
square, square,

5
packages/grid-item/index.wxml
View File

@ -1,7 +1,10 @@
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<view class="{{ utils.bem('grid-item', { square }) }}" style="{{ style }}" bindtap="onClick"> <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' : '' }}"> <view
class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
style="{{ contentStyle }}"
>
<block wx:if="{{ useSlot }}"> <block wx:if="{{ useSlot }}">
<slot /> <slot />
</block> </block>

3
packages/grid/index.ts
View File

@ -1,4 +1,5 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { addUnit } from '../common/utils';
VantComponent({ VantComponent({
relation: { relation: {
@ -53,7 +54,7 @@ VantComponent({
const { gutter } = this.data; const { gutter } = this.data;
if (gutter) { if (gutter) {
this.setData({ this.setData({
style: `padding-left: ${gutter}px` style: `padding-left: ${addUnit(gutter)}`
}); });
} }
}, },