自己关于uview 的组件理解

u-image 组件

最近临近年关，也该总结一下了

其中u-image 可以支持width，height和mode，shape，也可以支持图片错误的情况下，使用一张默认的的图片，今日进行深入研究，做个备注

1.width 和height 属性可以传入任意值，即可以传入带单位的rpx，也可以传入百分比

原因：是通过或者widh和height，进行一个叫addUnit的函数来进行数字验证，如果是纯数字的话，就加上rpx，
如果不是，就直接返回原来的数值

2 mode 和shape

 原因：通过一个计算属性 wrapStyle，
 wrapStype(){
 let style = {};
 style.width= addUnit(width);
 ....xxx
 style.borderRadius = this.sahpe == "circle" ? "50%":this.addUnit(你自己传进来的borderRdius的值，否则是0)
 style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
 //如果传入了fade的值
 return style
 }
 页面中使用 <view :style=[wrapStyle,backgroundStyle]></view>

onError 和onLoad

image中onError 和onLoad 这两个函数，当onError执行时，会触发isError=true 和isLoading=false
由于mage标签是使用了 v-if=“!isError”,所以会隐藏，由于有background的存在，页面不会一片空白，会显示默认的错误颜色，由于用了和image一样的宽高，所以页面不会坍陷，当传入自己所写的错误信息时
<view slot="error" style="font-size: 24rpx;">加载失败</view>
<slot v-if="$slots.error" name="error" />
这样可以对组件进行2次的改进
by the way
在组件中学到了
data(){ retrun { durationTime: this.duration, } }
可以对传进来的内内容进行使用和改造
以前我只知道可以传入一个对象，因为对象是引用类型，不会有子元素触发父元素的data问题

其中里面大量使用了:style的这种语法
:style="{ borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius), backgroundColor: this.bgColor }"
最终发现 {{this.color}} 和 普通的 {{color}} 都是统一的
<view :style="{width:'200rpx',height:'200rpx',backgroundColor:red}"> {{this.red}} </view>

通过u-image的学习，也学到了不少，2020-01-02-20:48