191 lines
3.8 KiB
Vue
191 lines
3.8 KiB
Vue
<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>
|