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.
 
 
 
 
 

155 lines
3.2 KiB

<template>
<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
marginLeft:`${Number(marginValue)}rpx`,
marginRight:`${Number(marginValue)}rpx`,
}">
<slot></slot>
</view>
</template>
<script>
const ComponentClass = 'uni-row';
const modifierSeparator = '--';
/**
* Row 布局-行
* @description 流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。
* @tutorial https://ext.dcloud.net.cn/plugin?id=3958
*
* @property {gutter} type = Number 栅格间隔
* @property {justify} type = String flex 布局下的水平排列方式
* 可选 start/end/center/space-around/space-between start
* 默认值 start
* @property {align} type = String flex 布局下的垂直排列方式
* 可选 top/middle/bottom
* 默认值 top
* @property {width} type = String|Number nvue下需要自行配置宽度用于计算
* 默认值 750
*/
export default {
name: 'uniRow',
componentName: 'uniRow',
// #ifdef MP-WEIXIN
options: {
virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点,更加接近Vue组件的表现,可使用flex布局
},
// #endif
props: {
type: String,
gutter: Number,
justify: {
type: String,
default: 'start'
},
align: {
type: String,
default: 'top'
},
// nvue如果使用span等属性,需要配置宽度
width: {
type: [String, Number],
default: 750
}
},
created() {
// #ifdef APP-NVUE
this.type = 'flex';
// #endif
},
computed: {
marginValue() {
// #ifndef APP-NVUE
if (this.gutter) {
return -(this.gutter / 2);
}
// #endif
return 0;
},
typeClass() {
return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
},
justifyClass() {
return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
},
alignClass() {
return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
}
}
};
</script>
<style scoped>
.uni-row {
position: relative;
flex-direction: row;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-row::before,
.uni-row::after {
display: table;
content: "";
}
.uni-row::after {
clear: both;
}
/* #endif */
/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
.uni-row--flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.uni-row--flex:before,
.uni-row--flex:after {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
}
.uni-row--flex-justify-center {
justify-content: center;
}
.uni-row--flex-justify-end {
justify-content: flex-end;
}
.uni-row--flex-justify-space-between {
justify-content: space-between;
}
.uni-row--flex-justify-space-around {
justify-content: space-around;
}
.uni-row--flex-align-middle {
align-items: center;
}
.uni-row--flex-align-bottom {
align-items: flex-end;
}
/* #endif */
/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
:host {
display: block;
}
/* #endif */
</style>