Skip to content

Commit a5c163a

Browse files
wlxuquwlxuqu
committed
1. 添加.editorconfig
2. 优化avatar头像组件二次加载图片时无效的问题 3. icon组件的lable新增在左边和上放的参数lebel-pos=left | top 4. image组件图片加载完成时移除背景色，避免png图片能看到底色 5. 优化line线条组件的length参数单位问题 6. 修复由于deepClone导致null结果为{}而导致http的loading无效的问题
1 parent fad8df8 commit a5c163a

File tree

13 files changed

+115
-54
lines changed

13 files changed

+115
-54
lines changed

‎.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[*]
22
#缩进风格：空格
3-
indent_style = space
3+
indent_style = tab
44
#缩进大小2
55
indent_size = 4
66
#换行符lf

‎manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name" : "uView",
33
"appid" : "__UNI__60F4B81",
44
"description" : "多平台快速开发的UI框架",
5-
"versionName" : "1.4.0",
5+
"versionName" : "1.4.1",
66
"versionCode" : "100",
77
"transformPx" : false,
88
"app-plus" : {

‎pages/componentsC/test/index.vue

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
<template>
22
<view>
3-
<!-- 底部弹窗 -->
4-
<u-popup v-model="show" mode="bottom">
5-
<view style="padding-bottom: 60px;">出淤泥而不染，濯清涟而不妖</view>
6-
</u-popup>
7-
<!-- 底部固定栏 -->
8-
<view class="box-1"></view>
9-
<!-- 模态框 -->
10-
<u-modal v-model="show" :zoom="false"></u-modal>
3+
<u-icon name="map" label="nihao" label-pos="right"></u-icon>
114
</view>
125
</template>
136

‎uview-ui/components/u-avatar/u-avatar.vue

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<template>
22
<view class="u-avatar" :style="[wrapStyle]" @tap="click">
3-
<image @error="loadError" :style="[imgStyle]" class="u-avatar-img" v-if="!text && defaultAvatar" :src="defaultAvatar" :mode="imgMode"></image>
3+
<image
4+
@error="loadError"
5+
:style="[imgStyle]"
6+
class="u-avatar-img"
7+
v-if="!text && avatar"
8+
:src="avatar"
9+
:mode="mode"
10+
></image>
411
<text class="u-line-1" v-else-if="text">{{text}}</text>
512
<slot v-else></slot>
613
</view>
@@ -65,12 +72,19 @@
6572
data() {
6673
return {
6774
error: false,
75+
avatar: this.src, // 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值
6876
}
6977
},
78+
watch: {
79+
src(n) {
80+
// 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值
81+
this.avatar = n;
82+
}
83+
},
7084
computed: {
7185
wrapStyle() {
7286
let style = {};
73-
style.height = this.size == 'large' ? '120rpx' : this.size == 'default' ?
87+
style.height = this.size == 'large' ? '120rpx' : this.size == 'default' ?
7488
'90rpx' : this.size == 'mini' ? '70rpx' : this.size + 'rpx';
7589
style.width = style.height;
7690
style.flex = `0 0 ${style.height}`;
@@ -79,21 +93,17 @@
7993
if(this.text) style.padding = `0 6rpx`;
8094
return style;
8195
},
82-
defaultAvatar() {
83-
if(!this.src) return base64Avatar;
84-
else if(this.src && this.error) return base64Avatar;
85-
else return this.src;
86-
},
8796
imgStyle() {
8897
let style = {};
8998
style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
9099
return style;
91-
}
100+
},
92101
},
93102
methods: {
94103
// 图片加载错误时，显示默认头像
95104
loadError() {
96105
this.error = true;
106+
this.avatar = base64Avatar;
97107
},
98108
click() {
99109
this.$emit('click', this.index);
@@ -104,17 +114,17 @@
104114

105115
<style lang="scss" scoped>
106116
@import "../../libs/css/style.components.scss";
107-
117+
108118
.u-avatar {
109119
display: inline-flex;
110120
align-items: center;
111121
justify-content: center;
112122
font-size: 28rpx;
113123
color: $u-content-color;
114124
border-radius: 10px;
115-
overflow: hidden;
125+
overflow: hidden;
116126
}
117-
127+
118128
.u-avatar-img {
119129
width: 100%;
120130
height: 100%;

‎uview-ui/components/u-icon/u-icon.vue

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<template>
2-
<view :style="[customStyle]" class="u-icon" @tap="click" :class="[labelPos == 'bottom' ? 'u-flex-col u-row-center' : 'u-flex u-col-center']">
2+
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
33
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
44
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
55
<text v-if="label" class="u-icon__label" :style="{
66
color: labelColor,
77
fontSize: labelSize + 'rpx',
88
marginLeft: labelPos == 'right' ? marginLeft + 'rpx' : 0,
99
marginTop: labelPos == 'bottom' ? marginTop + 'rpx' : 0,
10+
marginRight: labelPos == 'left' ? marginRight + 'rpx' : 0,
11+
marginBottom: labelPos == 'top' ? marginBottom + 'rpx' : 0,
1012
}">{{label}}</text>
1113
</view>
1214
</template>
@@ -26,6 +28,8 @@
2628
* @property {Object} custom-style icon的样式，对象形式
2729
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
2830
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
31+
* @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
32+
* @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
2933
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
3034
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
3135
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
@@ -100,6 +104,16 @@ export default {
100104
type: [String, Number],
101105
default: '6'
102106
},
107+
// label与图标的距离(竖向排列)
108+
marginRight: {
109+
type: [String, Number],
110+
default: '6'
111+
},
112+
// label与图标的距离(竖向排列)
113+
marginBottom: {
114+
type: [String, Number],
115+
default: '6'
116+
},
103117
// 图片的mode
104118
imgMode: {
105119
type: String,
@@ -167,32 +181,56 @@ export default {
167181
.u-icon {
168182
display: inline-flex;
169183
align-items: center;
170-
184+
185+
&--left {
186+
flex-direction: row;
187+
align-items: center;
188+
}
189+
190+
&--right {
191+
flex-direction: row-reverse;
192+
align-items: center;
193+
}
194+
195+
&--top {
196+
flex-direction: column-reverse;
197+
justify-content: center;
198+
}
199+
200+
&--bottom {
201+
flex-direction: column;
202+
justify-content: center;
203+
}
204+
171205
&__icon {
172206
&--primary {
173207
color: $u-type-primary;
174208
}
175-
209+
176210
&--success {
177211
color: $u-type-success;
178212
}
179-
213+
180214
&--error {
181215
color: $u-type-error;
182216
}
183-
217+
184218
&--warning {
185219
color: $u-type-warning;
186220
}
187-
221+
188222
&--info {
189223
color: $u-type-info;
190224
}
191225
}
192-
226+
193227
&__img {
194228
height: auto;
195229
will-change: transform;
196230
}
231+
232+
&__label {
233+
line-height: 1;
234+
}
197235
}
198236
</style>

‎uview-ui/components/u-image/u-image.vue

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<view
33
class="u-image"
44
@tap.stop.prevent="onClick"
5-
:style="[wrapStyle]"
5+
:style="[wrapStyle, backgroundStyle]"
66
>
7-
<image
8-
v-if="!isError"
9-
:src="src"
7+
<image
8+
v-if="!isError"
9+
:src="src"
1010
:mode="mode"
11-
@error="onErrorHandler"
12-
@load="onLoadHandler"
11+
@error="onErrorHandler"
12+
@load="onLoadHandler"
1313
:lazy-load="lazyLoad"
1414
class="u-image__image"
1515
:style="{
@@ -42,7 +42,7 @@ export default {
4242
// 裁剪模式
4343
mode: {
4444
type: String,
45-
default: 'widthFix'
45+
default: 'aspectFill'
4646
},
4747
// 宽度，单位任意
4848
width: {
@@ -62,7 +62,7 @@ export default {
6262
// 圆角，单位任意
6363
borderRadius: {
6464
type: [String, Number],
65-
default: 10
65+
default: 0
6666
},
6767
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
6868
lazyLoad: {
@@ -120,6 +120,8 @@ export default {
120120
opacity: 1,
121121
// 过渡时间，因为props的值无法修改，故需要一个中间值
122122
durationTime: this.duration,
123+
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
124+
backgroundStyle: {}
123125
};
124126
},
125127
computed: {
@@ -153,7 +155,7 @@ export default {
153155
// 图片加载完成，标记loading结束
154156
onLoadHandler() {
155157
this.loading = false;
156-
this.error = false;
158+
this.isError = false;
157159
this.$emit('load');
158160
// 如果不需要动画效果，就不执行下方代码
159161
if(!this.fade) return ;
@@ -166,6 +168,12 @@ export default {
166168
setTimeout(() => {
167169
this.durationTime = this.duration;
168170
this.opacity = 1;
171+
setTimeout(() => {
172+
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
173+
this.backgroundStyle = {
174+
backgroundColor: 'transparent'
175+
};
176+
}, this.durationTime)
169177
}, 50)
170178
}
171179
}
@@ -184,7 +192,7 @@ export default {
184192
width: 100%;
185193
height: 100%;
186194
}
187-
195+
188196
&__loading, &__error {
189197
position: absolute;
190198
top: 0;

‎uview-ui/components/u-line/u-line.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@
5959
// 此处采用兼容分开写，兼容nvue的写法
6060
style.borderBottomWidth = '1px';
6161
style.borderBottomStyle = this.borderStyle;
62-
style.width = this.length;
62+
style.width = this.$u.addUnit(this.length);
6363
if(this.hairLine) style.transform = 'scaleY(0.5)';
6464
} else {
6565
// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
6666
style.borderLeftWidth = '1px';
6767
style.borderLeftStyle = this.borderStyle;
68-
style.height = this.length;
68+
style.height = this.$u.addUnit(this.length);
6969
if(this.hairLine) style.transform = 'scaleX(0.5)';
7070
}
7171
style.borderColor = this.color;

‎uview-ui/components/u-loadmore/u-loadmore.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<view class="u-load-more-wrap" :style="{
33
backgroundColor: bgColor,
44
marginBottom: marginBottom + 'rpx',
5-
marginTop: marginTop + 'rpx'
5+
marginTop: marginTop + 'rpx',
6+
height: $u.addUnit(height)
67
}">
78
<!-- 加载中和没有更多的状态才显示两边的横线 -->
89
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
@@ -96,6 +97,11 @@
9697
type: [String, Number],
9798
default: 0
9899
},
100+
// 高度，单位rpx
101+
height: {
102+
type: [String, Number],
103+
default: 'auto'
104+
}
99105
},
100106
data() {
101107
return {

‎uview-ui/components/u-popup/u-popup.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,6 @@ export default {
181181
visibleSync: false,
182182
showDrawer: false,
183183
timer: null,
184-
style1: {}
185184
};
186185
},
187186
computed: {
@@ -249,7 +248,11 @@ export default {
249248
}
250249
}
251250
},
252-
methods: {
251+
mounted() {
252+
// 组件渲染完成时，检查value是否为true，如果是，弹出popup
253+
this.value && this.open();
254+
},
255+
methods: {
253256
// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
254257
getUnitValue(val) {
255258
if(/(%|px|rpx|auto)$/.test(val)) return val;

‎uview-ui/libs/config/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// 此版本发布于2020-06-28
2-
let version = '1.4.0';
2+
let version = '1.4.1';
33

44
export default {
55
v: version,

‎uview-ui/libs/function/deepClone.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
// 判断arr是否为一个数组，返回一个bool值
22
function isArray (arr) {
3-
return Object.prototype.toString.call(arr) === '[object Array]';
3+
return Object.prototype.toString.call(arr) === '[object Array]';
44
}
55

66
// 深度克隆
7-
function deepClone (obj) {
7+
function deepClone (obj) {
8+
// 对常见的“非”值，直接返回原来值
9+
if([null, undefined, NaN, false].includes(obj)) return obj;
810
if(typeof obj !== "object" && typeof obj !== 'function') {
911
//原始类型直接返回
10-
return obj;
12+
return obj;
13+
}
14+
var o = isArray(obj) ? [] : {};
15+
for(let i in obj) {
16+
if(obj.hasOwnProperty(i)){
17+
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
18+
}
1119
}
12-
var o = isArray(obj) ? [] : {};
13-
for(let i in obj) {
14-
if(obj.hasOwnProperty(i)){
15-
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
16-
}
17-
}
1820
return o;
1921
}
2022

0 commit comments

Comments
 (0)