Skip to content

Commit e0ec5ac

Browse files
wlxuquwlxuqu
committed
1. toast新增back参数用于toast结束后自动返回上一页
2. 修复upload组件初始化绑定对象文件列表后，修改外部文件列表导致内部数据错乱的问题 3. cell组件新增icon-style，border-top参数，无需强制结合cell-group即可使用 4. field组件新增border-top参数，，无需强制结合cell-group即可使用 5. 阻止radio和checkbox组件的事件冒泡 6. 优化input组件右侧的图片对齐效果 7. 新增精致，小巧而实用的image组件，有淡入，懒加载，加载中，加载失败提示等效果。 8. 新增this.$u.getParent()用于获取父组件参数的方法
1 parent 95496a5 commit e0ec5ac

File tree

14 files changed

+371
-28
lines changed

14 files changed

+371
-28
lines changed

‎pages.json

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"easycom": {
33
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
44
},
5-
// "condition": { //模式配置，仅开发期间生效
6-
// "current": 0, //当前激活的模式(list 的索引项)
7-
// "list": [{
8-
// "name": "test", //模式名称
9-
// "path": "pages/componentsC/test/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsC/test/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{
@@ -656,6 +656,13 @@
656656
"navigationBarTitleText": "line-线条"
657657
}
658658
},
659+
// image-图片
660+
{
661+
"path": "image/index",
662+
"style": {
663+
"navigationBarTitleText": "image-图片"
664+
}
665+
},
659666
// card-卡片
660667
{
661668
"path": "card/index",

‎pages/componentsB/image/index.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<view class="u-demo">
3+
<view class="u-demo-wrap">
4+
<view class="u-demo-title">演示效果</view>
5+
<view class="u-demo-area u-flex u-row-center">
6+
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
7+
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
8+
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
9+
</u-image>
10+
</view>
11+
</view>
12+
<view class="u-config-wrap">
13+
<view class="u-config-title u-border-bottom">参数配置</view>
14+
<view class="u-config-item">
15+
<view class="u-item-title">状态</view>
16+
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
17+
</view>
18+
<view class="u-config-item">
19+
<view class="u-item-title">加载中状态</view>
20+
<u-subsection vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
21+
</view>
22+
<view class="u-config-item">
23+
<view class="u-item-title">加载失败状态</view>
24+
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
25+
</view>
26+
<view class="u-config-item">
27+
<view class="u-item-title">形状</view>
28+
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
29+
</view>
30+
</view>
31+
</view>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data() {
37+
return {
38+
src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
39+
width: '200',
40+
height: '200',
41+
loadingSlot: false,
42+
statusCurrent: 0,
43+
errorSlot: false,
44+
shape: 'square'
45+
};
46+
},
47+
computed: {
48+
// statusCurrent() {
49+
// }
50+
},
51+
methods: {
52+
statusChange(index) {
53+
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
54+
if (index == 0) {
55+
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
56+
this.$refs.uImage.loading = false;
57+
this.$refs.uImage.isError = false;
58+
} else if (index == 1) {
59+
this.$refs.uImage.loading = true;
60+
} else {
61+
this.$refs.uImage.loading = false;
62+
this.$refs.uImage.isError = true;
63+
}
64+
},
65+
loadingChange(index) {
66+
this.statusCurrent = 1;
67+
this.statusChange(1);
68+
if (index == 0) {
69+
this.loadingSlot = false;
70+
} else {
71+
this.loadingSlot = true;
72+
}
73+
},
74+
errorChange(index) {
75+
this.statusCurrent = 2;
76+
this.statusChange(2);
77+
if (index == 0) {
78+
this.errorSlot = false;
79+
} else {
80+
this.errorSlot = true;
81+
}
82+
},
83+
shapeChange(index) {
84+
this.shape = index == 0 ? 'square' : 'circle';
85+
}
86+
}
87+
};
88+
</script>
89+
90+
<style scoped lang="scss">
91+
.u-demo-area {
92+
}
93+
</style>

‎pages/componentsC/test/index.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<template>
22
<view class="">
3-
43
</view>
5-
</template>
4+
</template>
5+
6+
<script>
7+
export default {
8+
data() {
9+
return {}
10+
}
11+
}
12+
</script>

‎pages/example/components.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ export default [{
88
path: '/pages/componentsA/icon/index',
99
icon: 'icon',
1010
title: 'Icon 图标',
11+
},{
12+
path: '/pages/componentsB/image/index',
13+
icon: 'image',
14+
title: 'Image 图片',
1115
}, {
1216
path: '/pages/componentsC/button/index',
1317
icon: 'button',

‎uview-ui/components/u-cell-item/u-cell-item.vue

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<view
33
@tap="click"
44
class="u-cell"
5-
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
5+
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
66
hover-stay-time="150"
77
:hover-class="hoverClass"
88
:style="{
99
backgroundColor: bgColor
1010
}"
1111
>
12-
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
12+
<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
1313
<view class="u-flex" v-else>
1414
<slot name="icon"></slot>
1515
</view>
@@ -49,13 +49,14 @@
4949
* @tutorial https://www.uviewui.com/components/cell.html
5050
* @property {String} title 左侧标题
5151
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
52+
* @property {Object} icon-style 左边图标的样式，对象形式
5253
* @property {String} value 右侧内容
5354
* @property {String} label 标题下方的描述信息
5455
* @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
5556
* @property {Boolean} border-top 是否显示cell的上边框（默认false）
5657
* @property {Boolean} center 是否使内容垂直居中（默认false）
5758
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
58-
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
59+
* // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
5960
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
6061
* @property {Boolean} required 箭头方向，可选值（默认right）
6162
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
@@ -101,10 +102,11 @@ export default {
101102
default: false
102103
},
103104
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
104-
borderGap: {
105-
type: Boolean,
106-
default: true
107-
},
105+
// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
106+
// borderGap: {
107+
// type: Boolean,
108+
// default: true
109+
// },
108110
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
109111
hoverClass: {
110112
type: String,
@@ -175,7 +177,14 @@ export default {
175177
iconSize: {
176178
type: [Number, String],
177179
default: 34
178-
}
180+
},
181+
// 左边图标的样式，对象形式
182+
iconStyle: {
183+
type: Object,
184+
default() {
185+
return {}
186+
}
187+
},
179188
},
180189
data() {
181190
return {
@@ -253,10 +262,6 @@ export default {
253262
position: relative;
254263
}
255264
256-
.u-border-gap:after {
257-
left: 32rpx !important;
258-
}
259-
260265
.u-cell__label {
261266
margin-top: 6rpx;
262267
font-size: 26rpx;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
* @tutorial https://www.uviewui.com/components/field.html
5656
* @property {String} type 输入框的类型（默认text）
5757
* @property {String} icon label左边的图标，限uView的图标名称
58+
* @property {Object} icon-style 左边图标的样式，对象形式
5859
* @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
5960
* @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
6061
* @property {String} label 输入框左边的文字提示

0 commit comments

Comments
 (0)