blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 31 deletions
Show Stats 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 { createNamespace } from '../utils';
import { ChildrenMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('col'); const [createComponent, bem] = createNamespace('col');
export default createComponent({ export default createComponent({
mixins: [ChildrenMixin('vanRow')],
props: { props: {
span: [Number, String], span: [Number, String],
offset: [Number, String], offset: [Number, String],
@ -14,12 +17,29 @@ export default createComponent({
computed: { computed: {
gutter() { gutter() {
return (this.$parent && Number(this.$parent.gutter)) || 0; return (this.parent && Number(this.parent.gutter)) || 0;
}, },
style() { style() {
const padding = `${this.gutter / 2}px`; const { index, gutter } = this;
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
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>
<div> <div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <div class="van-row">
<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-right: 13.333333333333334px;">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: 6.666666666666667px; padding-right: 6.666666666666667px;">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: 13.333333333333334px;">span: 8</div>
</div> </div>
</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>
<div> <div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <div class="van-row">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">contain</div> <div class="text">contain</div>
</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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">cover</div> <div class="text">cover</div>
</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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">fill</div> <div class="text">fill</div>
</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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">none</div> <div class="text">none</div>
</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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
@ -50,36 +50,36 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <div class="van-row">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <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 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">contain</div> <div class="text">contain</div>
</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 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">cover</div> <div class="text">cover</div>
</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 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">fill</div> <div class="text">fill</div>
</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 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">none</div> <div class="text">none</div>
</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 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
@ -89,15 +89,15 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <div class="van-row">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">默认提示</div> <div class="text">默认提示</div>
</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" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"> <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> <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>
<div> <div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <div class="van-row">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">默认提示</div> <div class="text">默认提示</div>
</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" 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"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>

5
src/mixins/relation.ts
View File

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

8
src/row/index.js
View File

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