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.
190 lines
3.8 KiB
190 lines
3.8 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 lang="scss"> |
|
$layout-namespace: ".uni-"; |
|
$row:$layout-namespace+"row"; |
|
$modifier-separator: "--"; |
|
|
|
@mixin utils-clearfix { |
|
$selector: &; |
|
|
|
@at-root { |
|
|
|
/* #ifndef APP-NVUE */ |
|
#{$selector}::before, |
|
#{$selector}::after { |
|
display: table; |
|
content: ""; |
|
} |
|
|
|
#{$selector}::after { |
|
clear: both; |
|
} |
|
|
|
/* #endif */ |
|
} |
|
|
|
} |
|
|
|
@mixin utils-flex ($direction: row) { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: $direction; |
|
} |
|
|
|
@mixin set-flex($state) { |
|
@at-root &-#{$state} { |
|
@content |
|
} |
|
} |
|
|
|
#{$row} { |
|
position: relative; |
|
flex-direction: row; |
|
|
|
/* #ifdef APP-NVUE */ |
|
flex: 1; |
|
/* #endif */ |
|
|
|
/* #ifndef APP-NVUE */ |
|
box-sizing: border-box; |
|
/* #endif */ |
|
|
|
// 非nvue使用float布局 |
|
@include utils-clearfix; |
|
|
|
// 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float |
|
@at-root { |
|
|
|
/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */ |
|
&#{$modifier-separator}flex { |
|
@include utils-flex; |
|
flex-wrap: wrap; |
|
flex: 1; |
|
|
|
&:before, |
|
&:after { |
|
/* #ifndef APP-NVUE */ |
|
display: none; |
|
/* #endif */ |
|
} |
|
|
|
@include set-flex(justify-center) { |
|
justify-content: center; |
|
} |
|
|
|
@include set-flex(justify-end) { |
|
justify-content: flex-end; |
|
} |
|
|
|
@include set-flex(justify-space-between) { |
|
justify-content: space-between; |
|
} |
|
|
|
@include set-flex(justify-space-around) { |
|
justify-content: space-around; |
|
} |
|
|
|
@include set-flex(align-middle) { |
|
align-items: center; |
|
} |
|
|
|
@include set-flex(align-bottom) { |
|
align-items: flex-end; |
|
} |
|
} |
|
|
|
/* #endif */ |
|
} |
|
|
|
} |
|
|
|
// 字节、QQ配置后不生效 |
|
// 此处用法无法使用 |
|
/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */ |
|
:host { |
|
display: block; |
|
} |
|
|
|
/* #endif */ |
|
</style>
|
|
|