vue项目中页面中最常用的key value横向对齐结构（uni-app为例）

vue项目中页面中最常用的key value横向对齐结构（uni-app为例）

概述

key以冒号进行右对齐，value左对齐；
可以从外部调用传入控制样式。

组件调用

<view class="wCenter">
	<Lr l='两个:' r='这里是文章测试这里是文测标题,含标点一共二十个字.这里是文章测试标题,含标点一共二十个字.'></Lr>
	<Lr l='三个字:' r='这里是文章测这里这里是文章测这里是文章测是文章测试标题,含标点一共二十\字.'></Lr>
	<Lr l='共四个字:' r='这里是文这里是文章测这里是文章测这里是文章测这里是文章测章测'></Lr>
	<Lr l='一共五个字:' r='这里是这里是文章测这里是文章测这里是文章测这里是文章测这里是文章测这里是文章测文章测'  lRStyle="font-size:30rpx;color:#f00"></Lr>
	<Lr l='一共是六个字:' r='这里是这里是文章测这里是文章测这里是文章测这里是文章测这里是文章测这里是文章测文章测' rStyle="font-size:30rpx;color:#f00"></Lr>
	<Lr l='这一共是七个字:' r='这里是这里是文这里是文章测这里是文章测文章测' lStyle="font-size:30rpx;color:#f00"></Lr>
</view>

依据路径引入文件，也可以配置easycom，进行全局自动引入

import Lr from '@/components/Haa/Lr/Lr.vue'
components:{
	Lr
},

效果图

组件源代码（可依据需求进行修改）

<template>
	<view class="lr" :style="lRStyle"> 
		<view class="l" :style="lStyle">
			{{l}}
		</view>
		<view class="r" :style="rStyle">
			{{r}}
		</view>
	</view>
</template>

<script>
	/**
	 * BY haley 
	 * https://nobug.blog.csdn.net/
	 * lr 横向布局的key:value 左右布局
	 * @lRStyle 整体样式控制,类型是String，而不是Object
	 * @lStyle 左侧key样式的控制,类型是String，而不是Object
	 * @lStyle 右侧value样式的控制,类型是String，而不是Object
	 * @l 左侧key值
	 * @r 右侧value值
	 */
	export default{
		props:{
			lRStyle:{
				type:String,
				default:''
			},
			lStyle:{
				type:String,
				default:''
			},
			rStyle:{
				type:String,
				default:''
			},
			l:{
				type:String,
				default:''
			},
			r:{
				type:String,
				default:''
			},
		},
	}
</script>

<style lang="scss" scoped>
	.lr{
		display: flex;
		align-items: flex-start;
		width: 100%;
		margin-bottom: 1em;
		.l,.r{
			
		}
		
		.l{
			display: flex;
			justify-content: flex-end;
			font-weight: bold;
			flex:1 0 6em;
			margin-right:.5em;
			align-self: flex-start;
		}
		.r{
			
		}
	}
</style>