You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.8 KiB
86 lines
2.8 KiB
<template>
|
|
<view class="s-row" :class="c_class" :style="c_style">
|
|
<view class="s-row__wrap" :class="wrap_class" :style="wrap_style">
|
|
<slot />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMixin from '../../mixins/componentMixin';
|
|
|
|
/**
|
|
* s-row 栅格布局
|
|
* @description 栅格组件父元素
|
|
* @property {Boolean} vertical 是否竖向排列，默认false
|
|
* @property {Number|String} gutter 列元素主轴之间的间距（默认单位为 rpx）
|
|
* @property {Number|String} gutterY 列元素交叉轴之间的间距（默认单位为 rpx）
|
|
* @property {String} justify = [start|center|end|space-around|space-between] Flex水平对齐方式，默认start
|
|
* @property {String} align = [stretch|start|center|end] Flex垂直对齐方式，默认stretch，等高
|
|
* @property {Number|String} height 同style中height属性，设了height属性代表有了指定高度，竖向排列时会对子组件高度加以约束，防止外层无限撑高。
|
|
* @property {String|Object} wrapStyle wrap容器的样式
|
|
* @property {String} overflow 同style中overflow属性
|
|
* @example <s-row></s-row>
|
|
*/
|
|
export default {
|
|
name: 'SRow',
|
|
mixins: [componentMixin],
|
|
props: {
|
|
vertical: Boolean,
|
|
justify: String,
|
|
align: String,
|
|
gutter: [Number, String],
|
|
gutterY: [Number, String],
|
|
height: [Number, String],
|
|
wrapStyle: [String, Object],
|
|
overflow: String,
|
|
},
|
|
computed: {
|
|
c_class() {
|
|
return this.$mergeClass({
|
|
's-row--vertical': this.vertical,
|
|
});
|
|
},
|
|
c_style() {
|
|
return this.$mergeStyle({
|
|
height: this.$addUnit(this.height),
|
|
overflow: this.overflow,
|
|
}, this.custom_style);
|
|
},
|
|
wrap_class() {
|
|
return this.$mergeClass({
|
|
[`s-row--justify-${this.justify}`]: this.justify,
|
|
[`s-row--align-${this.align}`]: this.align,
|
|
});
|
|
},
|
|
wrap_style() {
|
|
const style = {};
|
|
let { vertical, height, mainSpace, crossSpace } = this;
|
|
if (height && height !== 'auto') {
|
|
style.height = '0px';
|
|
}
|
|
if (mainSpace) {
|
|
mainSpace = '-' + mainSpace;
|
|
style[vertical ? 'marginTop' : 'marginLeft'] = mainSpace;
|
|
style[vertical ? 'marginBottom' : 'marginRight'] = mainSpace;
|
|
}
|
|
if (crossSpace) {
|
|
crossSpace = '-' + crossSpace;
|
|
style[vertical ? 'marginLeft' : 'marginTop'] = crossSpace;
|
|
style[vertical ? 'marginRight' : 'marginBottom'] = crossSpace;
|
|
}
|
|
return this.$mergeStyle(style, this.wrapStyle);
|
|
},
|
|
mainSpace() {
|
|
const mainSpace = parseInt(this.$toPx(this.gutter) / 2);
|
|
return mainSpace > 0 ? mainSpace + 'px' : '';
|
|
},
|
|
crossSpace() {
|
|
const crossSpace = parseInt(this.$toPx(this.gutterY) / 2);
|
|
return crossSpace > 0 ? crossSpace + 'px' : '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="./index.scss"></style>
|
|
|