blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-26 08:19:15 +08:00
Code Issues 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 a460425b265e9b83a8e835466be60c87b157e73e.

* 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 112 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/col/index.js
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,
};
}
},

4
src/col/test/__snapshots__/demo.spec.js.snap
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>

22
src/col/test/__snapshots__/index.spec.js.snap Normal file
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>
`;

31
src/col/test/index.spec.js
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();
});

20
src/image/test/__snapshots__/demo.spec.js.snap
View File

@ -12,35 +12,35 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 16px;">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" 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 class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 16px;">
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
@ -51,35 +51,35 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 16px;">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" 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 class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 16px;">
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>

41
src/row/index.js
View File

@ -20,6 +20,47 @@ export default createComponent({
},
},
computed: {
spaces() {
const gutter = Number(this.gutter);
if (!gutter) {
return;
}
const spaces = [];
const groups = [[]];
let totalSpan = 0;
this.children.forEach((item, index) => {
totalSpan += Number(item.span);
if (totalSpan > 24) {
groups.push([index]);
totalSpan -= 24;
} else {
groups[groups.length - 1].push(index);
}
});
groups.forEach((group) => {
const averagePadding = (gutter * (group.length - 1)) / group.length;
group.forEach((item, index) => {
if (index === 0) {
spaces.push({ right: group.length > 1 ? averagePadding : 0 });
} else {
const left = gutter - spaces[item - 1].right;
const right = averagePadding - left;
spaces.push({ left, right });
}
});
});
return spaces;
},
},
methods: {
onClick(event) {
this.$emit('click', event);