Commit a5c163a2 authored by wlxuqu's avatar wlxuqu

1. 添加.editorconfig

2. 优化avatar头像组件二次加载图片时无效的问题
3. icon组件的lable新增在左边和上放的参数lebel-pos=left | top
4. image组件图片加载完成时移除背景色,避免png图片能看到底色
5. 优化line线条组件的length参数单位问题
6. 修复由于deepClone导致null结果为{}而导致http的loading无效的问题
parent fad8df8e
[*]
#缩进风格:空格
indent_style = space
indent_style = tab
#缩进大小2
indent_size = 4
#换行符lf
......
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.4.0",
"versionName" : "1.4.1",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
<template>
<view>
<!-- 底部弹窗 -->
<u-popup v-model="show" mode="bottom">
<view style="padding-bottom: 60px;">出淤泥而不染,濯清涟而不妖</view>
</u-popup>
<!-- 底部固定栏 -->
<view class="box-1"></view>
<!-- 模态框 -->
<u-modal v-model="show" :zoom="false"></u-modal>
<u-icon name="map" label="nihao" label-pos="right"></u-icon>
</view>
</template>
......
<template>
<view class="u-avatar" :style="[wrapStyle]" @tap="click">
<image @error="loadError" :style="[imgStyle]" class="u-avatar-img" v-if="!text && defaultAvatar" :src="defaultAvatar" :mode="imgMode"></image>
<image
@error="loadError"
:style="[imgStyle]"
class="u-avatar-img"
v-if="!text && avatar"
:src="avatar"
:mode="mode"
></image>
<text class="u-line-1" v-else-if="text">{{text}}</text>
<slot v-else></slot>
</view>
......@@ -65,6 +72,13 @@
data() {
return {
error: false,
avatar: this.src, // 头像的地址,因为如果加载错误,需要赋值为默认图片,props值无法修改,所以需要一个中间值
}
},
watch: {
src(n) {
// 用户可能会在头像加载失败时,再次修改头像值,所以需要重新赋值
this.avatar = n;
}
},
computed: {
......@@ -79,21 +93,17 @@
if(this.text) style.padding = `0 6rpx`;
return style;
},
defaultAvatar() {
if(!this.src) return base64Avatar;
else if(this.src && this.error) return base64Avatar;
else return this.src;
},
imgStyle() {
let style = {};
style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
return style;
}
},
},
methods: {
// 图片加载错误时,显示默认头像
loadError() {
this.error = true;
this.avatar = base64Avatar;
},
click() {
this.$emit('click', this.index);
......
<template>
<view :style="[customStyle]" class="u-icon" @tap="click" :class="[labelPos == 'bottom' ? 'u-flex-col u-row-center' : 'u-flex u-col-center']">
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
<text v-if="label" class="u-icon__label" :style="{
......@@ -7,6 +7,8 @@
fontSize: labelSize + 'rpx',
marginLeft: labelPos == 'right' ? marginLeft + 'rpx' : 0,
marginTop: labelPos == 'bottom' ? marginTop + 'rpx' : 0,
marginRight: labelPos == 'left' ? marginRight + 'rpx' : 0,
marginBottom: labelPos == 'top' ? marginBottom + 'rpx' : 0,
}">{{label}}</text>
</view>
</template>
......@@ -26,6 +28,8 @@
* @property {Object} custom-style icon的样式,对象形式
* @property {String | Number} margin-left label在右侧时与图标的距离,单位rpx(默认6)
* @property {String | Number} margin-top label在下方时与图标的距离,单位rpx(默认6)
* @property {String | Number} margin-bottom label在上方时与图标的距离,单位rpx(默认6)
* @property {String | Number} margin-right label在左侧时与图标的距离,单位rpx(默认6)
* @property {String} label-pos label相对于图标的位置,只能right或bottom(默认right)
* @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网
......@@ -100,6 +104,16 @@ export default {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginRight: {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginBottom: {
type: [String, Number],
default: '6'
},
// 图片的mode
imgMode: {
type: String,
......@@ -168,6 +182,26 @@ export default {
display: inline-flex;
align-items: center;
&--left {
flex-direction: row;
align-items: center;
}
&--right {
flex-direction: row-reverse;
align-items: center;
}
&--top {
flex-direction: column-reverse;
justify-content: center;
}
&--bottom {
flex-direction: column;
justify-content: center;
}
&__icon {
&--primary {
color: $u-type-primary;
......@@ -194,5 +228,9 @@ export default {
height: auto;
will-change: transform;
}
&__label {
line-height: 1;
}
}
</style>
......@@ -2,7 +2,7 @@
<view
class="u-image"
@tap.stop.prevent="onClick"
:style="[wrapStyle]"
:style="[wrapStyle, backgroundStyle]"
>
<image
v-if="!isError"
......@@ -42,7 +42,7 @@ export default {
// 裁剪模式
mode: {
type: String,
default: 'widthFix'
default: 'aspectFill'
},
// 宽度,单位任意
width: {
......@@ -62,7 +62,7 @@ export default {
// 圆角,单位任意
borderRadius: {
type: [String, Number],
default: 10
default: 0
},
// 是否懒加载,微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
......@@ -120,6 +120,8 @@ export default {
opacity: 1,
// 过渡时间,因为props的值无法修改,故需要一个中间值
durationTime: this.duration,
// 图片加载完成时,去掉背景颜色,因为如果是png图片,就会显示灰色的背景
backgroundStyle: {}
};
},
computed: {
......@@ -153,7 +155,7 @@ export default {
// 图片加载完成,标记loading结束
onLoadHandler() {
this.loading = false;
this.error = false;
this.isError = false;
this.$emit('load');
// 如果不需要动画效果,就不执行下方代码
if(!this.fade) return ;
......@@ -166,6 +168,12 @@ export default {
setTimeout(() => {
this.durationTime = this.duration;
this.opacity = 1;
setTimeout(() => {
// 淡入动画过渡完成后,将背景设置为透明色,否则png图片会看到灰色的背景
this.backgroundStyle = {
backgroundColor: 'transparent'
};
}, this.durationTime)
}, 50)
}
}
......
......@@ -59,13 +59,13 @@
// 此处采用兼容分开写,兼容nvue的写法
style.borderBottomWidth = '1px';
style.borderBottomStyle = this.borderStyle;
style.width = this.length;
style.width = this.$u.addUnit(this.length);
if(this.hairLine) style.transform = 'scaleY(0.5)';
} else {
// 如果是竖向线条,边框宽度为1px,再通过transform缩小一半,就是0.5px了
style.borderLeftWidth = '1px';
style.borderLeftStyle = this.borderStyle;
style.height = this.length;
style.height = this.$u.addUnit(this.length);
if(this.hairLine) style.transform = 'scaleX(0.5)';
}
style.borderColor = this.color;
......
......@@ -2,7 +2,8 @@
<view class="u-load-more-wrap" :style="{
backgroundColor: bgColor,
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
marginTop: marginTop + 'rpx',
height: $u.addUnit(height)
}">
<!-- 加载中和没有更多的状态才显示两边的横线 -->
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
......@@ -96,6 +97,11 @@
type: [String, Number],
default: 0
},
// 高度,单位rpx
height: {
type: [String, Number],
default: 'auto'
}
},
data() {
return {
......
......@@ -181,7 +181,6 @@ export default {
visibleSync: false,
showDrawer: false,
timer: null,
style1: {}
};
},
computed: {
......@@ -249,6 +248,10 @@ export default {
}
}
},
mounted() {
// 组件渲染完成时,检查value是否为true,如果是,弹出popup
this.value && this.open();
},
methods: {
// 判断传入的值,是否带有单位,如果没有,就默认用rpx单位
getUnitValue(val) {
......
// 此版本发布于2020-06-28
let version = '1.4.0';
let version = '1.4.1';
export default {
v: version,
......
......@@ -5,6 +5,8 @@ function isArray (arr) {
// 深度克隆
function deepClone (obj) {
// 对常见的“非”值,直接返回原来值
if([null, undefined, NaN, false].includes(obj)) return obj;
if(typeof obj !== "object" && typeof obj !== 'function') {
//原始类型直接返回
return obj;
......
......@@ -32,6 +32,7 @@ class Request {
uni.hideLoading();
// 清除定时器,如果请求回来了,就无需loading
clearTimeout(this.config.timer);
this.timer = null;
// 判断用户对拦截返回数据的要求,如果originalData为true,返回所有的数据(response)到拦截器,否则只返回response.data
if(this.config.originalData) {
// 判断是否存在拦截器
......
{
"name": "uview-ui",
"version": "1.4.0",
"version": "1.4.1",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment