关于u-row 和u-col

使用方法

<u-row gutter="16" justify="center">
	<u-col span="3">
		<view class="demo-layout bg-purple"></view>
	</u-col>
	<u-col span="3" offset="6">
		<view class="demo-layout bg-purple-light"></view>
	</u-col>
</u-row>

可以传入gutter 和justify
在u-col 里面传入 span 和offset

1. 传入justify 进行一系列的处理
2. 因为在style 无法使用 - 方法

	:style="{
   		alignItems: uAlignItem,
   		justifyContent: uJustify
   	}"
   	//使用计算属性计算uJustify如果是start的话，就加上**flex-**。如果是
   //	space-aroundt的话，是加上了 **space -** 
   	uJustify() {
   			if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
   			else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
   			else return this.justify;
   		},
   	```
   	在col 中sapn和offset的原理是flex 的百分比和marginLeft
<view class="u-col" :class="[
   	'u-col-' + span
   ]" :style="{
   	padding: `0 ${Number(gutter)/2 + 'rpx'}`,
   	marginLeft: 100 / 12 * offset + '%',
   	flex: `0 0 ${100 / 12 * span}%`,
   	alignItems: uAlignItem,
   	justifyContent: uJustify,
   	textAlign: textAlign
   }"
    @tap="click">
   	<slot></slot>
   </view>

如何获取父组件中的gutter 属性呢？
由于u-row 不一定是直接父组件并且支付宝小程序中不支持provide和inject的写法
所以采用了while循环

重点

export default function $parent(name = undefined) {
let parent = this.$parent;
// 通过while历遍，这里主要是为了H5需要多层解析的问题

while (parent) {
	// 父组件
	if (parent.$options && parent.$options.name !== name) {
		// 如果组件的name不相等，继续上一级寻找
		parent = parent.$parent;
	} else {
		return parent;
	}
}
return false;

}

	调用
	this.parent = this.$u.$parent.call(this, 'u-row');	
	只要找到父组件的name 属性为`**u-row**`的
//	call 是为了里面的this  指向自身
	this.gutter = this.parent.gutter;

通过此处案列，学会了
通过只传入一个justify 来进行不同的适配
flex的百分比写法 （span）
calc比例写法
.u-col-5 {
width: calc(100%/12 * 5);
}
查询父组件或者祖父组件的属性值