使用方法
<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
- 传入justify 进行一系列的处理
- 因为在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);
}
查询父组件或者祖父组件的属性值