vue-pro/yudao-ui-admin-uniapp/uni_modules/uni-row/components/uni-row/uni-row.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>