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
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> |