alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(Layout): gutter calculation (#6197)

Browse Source 
* Revert "fix(Layout): outside of the screen after setting gutter (#6143)"

This reverts commit a460425b26.

* fix(Layout): gutter calculation

* test: fix snapshot
This commit is contained in:
neverland
2020-05-02 16:43:52 +08:00
committed by GitHub
parent 4adefe5605
commit 9a4927ac05
6 changed files with 112 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/col/index.js
+6 -19
View File
@@ -16,28 +16,15 @@ export default createComponent({
},
computed: {
gutter() {
return (this.parent && Number(this.parent.gutter)) || 0;
},
style() {
const { index, gutter } = this;
if (gutter) {
const count = this.parent.children.length;
const padding = (gutter * (count - 1)) / count;
if (index === 0) {
return { paddingRight: `${padding}px` };
}
if (index === count - 1) {
return { paddingLeft: `${padding}px` };
}
const { index } = this;
const { spaces } = this.parent || {};
if (spaces && spaces[index]) {
const { left, right } = spaces[index];
return {
paddingLeft: `${padding / 2}px`,
paddingRight: `${padding / 2}px`,
paddingLeft: left ? `${left}px` : null,
paddingRight: right ? `${right}px` : null,
};
}
},
src/col/test/__snapshots__/demo.spec.js.snap
+2 -2
View File
@@ -23,8 +23,8 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666667px; padding-right: 6.666666666666667px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333334px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
</div>
</div>
<div>
src/col/test/__snapshots__/index.spec.js.snap
+22
View File
@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`gutter prop 1`] = `
<div class="van-row">
<div class="van-col van-col--24">24</div>
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
</div>
`;
src/col/test/index.spec.js
+31
View File
@@ -15,3 +15,34 @@ test('Row click event', () => {
expect(wrapper.emitted('click')).toBeTruthy();
});
test('gutter prop', () => {
const wrapper = mount({
template: `
<van-row gutter="24">
<van-col span="24">24</van-col>
<van-col span="12">12</van-col>
<van-col span="12">12</van-col>
<van-col span="8">8</van-col>
<van-col span="8">8</van-col>
<van-col span="8">8</van-col>
<van-col span="6">6</van-col>
<van-col span="6">6</van-col>
<van-col span="6">6</van-col>
<van-col span="6">6</van-col>
<van-col span="7">7</van-col>
<van-col span="6">6</van-col>
<van-col span="5">5</van-col>
<van-col span="4">4</van-col>
<van-col span="3">3</van-col>
<van-col span="2">2</van-col>
</van-row>
`,
});
expect(wrapper).toMatchSnapshot();
});