diff --git a/src/col/index.js b/src/col/index.js index 9fe9a4e69..e6a569f22 100644 --- a/src/col/index.js +++ b/src/col/index.js @@ -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`, + }; + } }, }, diff --git a/src/col/test/__snapshots__/demo.spec.js.snap b/src/col/test/__snapshots__/demo.spec.js.snap index 12fd3b7fb..f185770c6 100644 --- a/src/col/test/__snapshots__/demo.spec.js.snap +++ b/src/col/test/__snapshots__/demo.spec.js.snap @@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
-
-
span: 8
-
span: 8
-
span: 8
+
+
span: 8
+
span: 8
+
span: 8
diff --git a/src/image/test/__snapshots__/demo.spec.js.snap b/src/image/test/__snapshots__/demo.spec.js.snap index 333d10b86..e41266caa 100644 --- a/src/image/test/__snapshots__/demo.spec.js.snap +++ b/src/image/test/__snapshots__/demo.spec.js.snap @@ -11,36 +11,36 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
contain
-
+
cover
-
+
fill
-
+
none
-
+
@@ -50,36 +50,36 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
contain
-
+
cover
-
+
fill
-
+
none
-
+
@@ -89,15 +89,15 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
默认提示
-
+
@@ -108,15 +108,15 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
默认提示
-
+
diff --git a/src/mixins/relation.ts b/src/mixins/relation.ts index 3c0ad74eb..faac38c92 100644 --- a/src/mixins/relation.ts +++ b/src/mixins/relation.ts @@ -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; }, }, diff --git a/src/row/index.js b/src/row/index.js index 1e233bdfb..76a70f9ab 100644 --- a/src/row/index.js +++ b/src/row/index.js @@ -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 (