ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 09:24:25 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(Layout): outside of the screen after setting gutter (#6143)

Browse Source
This commit is contained in:
neverland
2020-04-27 10:49:24 +08:00
committed by GitHub
parent 0786779842
commit a460425b26
5 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/col/index.js
View File

@@ -1,8 +1,11 @@
import { createNamespace } from '../utils';
import { ChildrenMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('col');
export default createComponent({
mixins: [ChildrenMixin('vanRow')],
props: {
span: [Number, String],
offset: [Number, String],
@@ -14,12 +17,29 @@ export default createComponent({
computed: {
gutter() {
return (this.$parent && Number(this.$parent.gutter)) || 0;
return (this.parent && Number(this.parent.gutter)) || 0;
},
style() {
const padding = `${this.gutter / 2}px`;
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
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` };
}
return {
paddingLeft: `${padding / 2}px`,
paddingRight: `${padding / 2}px`,
};
}
},
},

8
src/col/test/__snapshots__/demo.spec.js.snap
View File

@@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</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>
</div>
<div>

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

@@ -11,36 +11,36 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 16px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 16px;">
<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>
@@ -50,36 +50,36 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 16px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
<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: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 16px;">
<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>
@@ -89,15 +89,15 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
@@ -108,15 +108,15 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>

7
src/mixins/relation.ts
View File

@@ -33,7 +33,12 @@ export function ChildrenMixin(
[indexKey]() {
this.bindRelation();
return this.parent.children.indexOf(this);
if (this.parent) {
return this.parent.children.indexOf(this);
}
return null;
},
},

8
src/row/index.js
View File

@@ -1,8 +1,11 @@
import { createNamespace } from '../utils';
import { ParentMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('row');
export default createComponent({
mixins: [ParentMixin('vanRow')],
props: {
type: String,
align: String,
@@ -26,14 +29,9 @@ export default createComponent({
render() {
const { align, justify } = this;
const flex = this.type === 'flex';
const margin = `-${Number(this.gutter) / 2}px`;
const style = this.gutter
? { marginLeft: margin, marginRight: margin }
: {};
return (
<this.tag
style={style}
class={bem({
flex,
[`align-${align}`]: flex && align,