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.
67 lines
2.0 KiB
67 lines
2.0 KiB
<template>
|
|
<view class="s-col" :class="c_class" :style="c_style">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMixin from '../../mixins/componentMixin';
|
|
|
|
/**
|
|
* s-col s-row子级
|
|
* @description 栅格组件子元素
|
|
* @property {Number|String} span 列元素主轴空间比例
|
|
* @property {Number|String} flex 同flex的flex-grow属性，用于自适应剩余空间，优先级高于span
|
|
* @property {Number|String} offset 列元素主轴空间偏移比例
|
|
* @property {String} overflow 同style中overflow属性
|
|
* @example <s-span :span="8"></s-span>
|
|
*/
|
|
export default {
|
|
name: 'SCol',
|
|
mixins: [componentMixin],
|
|
props: {
|
|
span: [Number, String],
|
|
offset: [Number, String],
|
|
flex: [Number, String],
|
|
},
|
|
computed: {
|
|
c_class() {
|
|
const { vertical } = this.$sRow;
|
|
const classs = [];
|
|
const flex = parseInt(this.flex);
|
|
const span = parseInt(this.span);
|
|
const offset = parseInt(this.offset);
|
|
if (flex > 0) {
|
|
classs.push(`s-col--flex-${this.flex}`);
|
|
} else if (span > 0) {
|
|
classs.push(`s-col--${this.span}`);
|
|
}
|
|
if (offset > 0) {
|
|
classs.push(`s-col--${vertical ? 'vertical-' : ''}offset-${this.offset}`);
|
|
}
|
|
return this.$mergeClass(classs, this.custom_class);
|
|
},
|
|
c_style() {
|
|
const { vertical, mainSpace, crossSpace } = this.$sRow;
|
|
const style = {};
|
|
if (+this.span || +this.flex) {
|
|
style[vertical ? 'height' : 'width'] = '0px';
|
|
}
|
|
if (mainSpace) {
|
|
style[vertical ? 'paddingTop' : 'paddingLeft'] = mainSpace;
|
|
style[vertical ? 'paddingBottom' : 'paddingRight'] = mainSpace;
|
|
}
|
|
if (crossSpace) {
|
|
style[vertical ? 'paddingLeft' : 'paddingTop'] = crossSpace;
|
|
style[vertical ? 'paddingRight' : 'paddingBottom'] = crossSpace;
|
|
}
|
|
return this.$mergeStyle(style, this.custom_style);
|
|
},
|
|
},
|
|
created() {
|
|
this.$sRow = this.$getParentUntil('SRow');
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="./index.scss"></style>
|
|
|