152 lines
3.2 KiB
Vue
152 lines
3.2 KiB
Vue
<template>
|
||
<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
|
||
marginLeft:`${Number(marginValue)}rpx`,
|
||
marginRight:`${Number(marginValue)}rpx`,
|
||
}">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* uni-row 布局-行
|
||
* @description 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
|
||
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||
*
|
||
* @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
|
||
*/
|
||
const ComponentClass = 'uni-row';
|
||
const modifierSeparator = '--';
|
||
|
||
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 */
|
||
/* #endif */
|
||
/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
|
||
/* #endif */
|
||
}
|
||
|
||
.uni-row::before,
|
||
.uni-row::after {
|
||
display: table;
|
||
content: "";
|
||
}
|
||
|
||
.uni-row::after {
|
||
clear: both;
|
||
}
|
||
|
||
.uni-row--flex {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
/* #endif */
|
||
}
|
||
|
||
.uni-row--flex:before,
|
||
.uni-row--flex:after {
|
||
display: none;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
|
||
:host {
|
||
display: block;
|
||
}
|
||
|
||
/* #endif */
|
||
</style> |