Skip to content

Commit 95496a5

Browse files
wlxuquwlxuqu
committed
优化cell和filed组件，无需强制结合ceel-group使用
1 parent f4070f2 commit 95496a5

File tree

7 files changed

+54
-71
lines changed

7 files changed

+54
-71
lines changed

‎pages/componentsA/field/index.vue

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,25 @@
33
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
44
<view class="u-demo-title">演示效果</view>
55
<view class="u-demo-area">
6-
<u-cell-group>
7-
<u-field
8-
v-model="mobile"
9-
label="手机号"
10-
:error-message="errorMessage"
11-
placeholder="请填写手机号"
12-
:required="required"
13-
:icon="icon1"
14-
:type="type"
15-
>
16-
</u-field>
17-
<u-field
18-
v-model="code"
19-
label="验证码"
20-
placeholder="请填写验证码"
21-
:required="required"
22-
:icon="icon2"
23-
>
24-
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
25-
</u-field>
26-
</u-cell-group>
6+
<u-field
7+
v-model="mobile"
8+
label="手机号"
9+
:error-message="errorMessage"
10+
placeholder="请填写手机号"
11+
:required="required"
12+
:icon="icon1"
13+
:type="type"
14+
>
15+
</u-field>
16+
<u-field
17+
v-model="code"
18+
label="验证码"
19+
placeholder="请填写验证码"
20+
:required="required"
21+
:icon="icon2"
22+
>
23+
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
24+
</u-field>
2725
</view>
2826
</view>
2927
<view class="u-config-wrap">

‎pages/componentsC/cell/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
1313
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
1414
</u-cell-item>
15-
<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
15+
<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
1616
<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
1717
<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
1818
<u-field slot="value"></u-field>

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,6 @@
4646
index: 0,
4747
}
4848
},
49-
provide() {
50-
return {
51-
uCellGroup: this
52-
}
53-
},
5449
}
5550
</script>
5651

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<view
33
@tap="click"
44
class="u-cell"
5-
:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, '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-border-gap': borderGap, 'u-cell--required': required }"
66
hover-stay-time="150"
77
:hover-class="hoverClass"
88
:style="{
@@ -51,7 +51,8 @@
5151
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
5252
* @property {String} value 右侧内容
5353
* @property {String} label 标题下方的描述信息
54-
* @property {Boolean} border-bottom 是否显示每个cell的下边框（默认true）
54+
* @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
55+
* @property {Boolean} border-top 是否显示cell的上边框（默认false）
5556
* @property {Boolean} center 是否使内容垂直居中（默认false）
5657
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
5758
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
@@ -89,11 +90,16 @@ export default {
8990
type: [String, Number],
9091
default: ''
9192
},
92-
// 是否显示内边框
93+
// 是否显示下边框
9394
borderBottom: {
9495
type: Boolean,
9596
default: true
9697
},
98+
// 是否显示上边框
99+
borderTop: {
100+
type: Boolean,
101+
default: false
102+
},
97103
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
98104
borderGap: {
99105
type: Boolean,
@@ -171,24 +177,11 @@ export default {
171177
default: 34
172178
}
173179
},
174-
inject: {
175-
uCellGroup: {
176-
// 添加默认值，是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
177-
default() {
178-
return {
179-
index: 0
180-
}
181-
}
182-
}
183-
},
184180
data() {
185181
return {
186-
itemIndex: 0
182+
187183
};
188184
},
189-
created() {
190-
this.itemIndex = this.uCellGroup.index++;
191-
},
192185
computed: {
193186
arrowStyle() {
194187
let style = {};

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

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view class="u-field" :class="{'u-field-border': itemIndex > 0 }">
2+
<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
33
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
44
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
55
justifyContent: justifyContent,
@@ -65,6 +65,8 @@
6565
* @property {Object} field-style 自定义输入框的样式，对象形式
6666
* @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
6767
* @property {String} input-align 输入框内容对齐方式（默认left）
68+
* @property {Boolean} border-bottom 是否显示field的下边框（默认true）
69+
* @property {Boolean} border-top 是否显示field的上边框（默认false）
6870
* @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
6971
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
7072
* @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
@@ -169,20 +171,24 @@ export default {
169171
default() {
170172
return {}
171173
}
172-
}
174+
},
175+
// 是否显示上边框
176+
borderTop: {
177+
type: Boolean,
178+
default: false
179+
},
180+
// 是否显示下边框
181+
borderBottom: {
182+
type: Boolean,
183+
default: true
184+
},
173185
},
174-
inject: ['uCellGroup'],
175186
data() {
176187
return {
177188
focused: false,
178189
itemIndex: 0,
179190
};
180191
},
181-
created() {
182-
if(this.uCellGroup) {
183-
this.itemIndex = this.uCellGroup.index++;
184-
}
185-
},
186192
computed: {
187193
inputWrapStyle() {
188194
let style = {};
@@ -343,19 +349,6 @@ export default {
343349
align-items: center;
344350
}
345351
346-
.u-field-border:after {
347-
left: 32rpx!important;
348-
position: absolute;
349-
box-sizing: border-box;
350-
content: ' ';
351-
pointer-events: none;
352-
right: 0;
353-
top: 0;
354-
border-bottom: 1px solid $u-border-color;
355-
-webkit-transform: scaleY(0.5);
356-
transform: scaleY(0.5);
357-
}
358-
359352
.u-error-message {
360353
color: $u-type-error;
361354
font-size: 26rpx;

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ export default function getParent(name, keys) {
66
while (parent) {
77
// 父组件
88
if (parent.$options.name !== name) {
9+
// 如果组件的name不相等，继续上一级寻找
910
parent = parent.$parent;
1011
} else {
11-
return keys.reduce((result, key) => {
12-
result[key] = parent[key];
13-
return result;
14-
}, {});
12+
let data = {};
13+
// 历遍传过来的对象参数
14+
for(let i in keys) {
15+
// 如果父组件有此值则用，无此值则用默认值
16+
data[i] = parent[i] ? parent[i] : keys[i];
17+
}
18+
return data;
1519
}
1620
}
1721

18-
return null;
22+
return {};
1923
}

‎uview-ui/theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $u-main-color: #303133;
66
$u-content-color: #606266;
77
$u-tips-color: #909399;
88
$u-light-color: #c0c4cc;
9-
$u-border-color: #e4e7ed;
9+
$u-border-color: red;
1010
$u-bg-color: #f3f4f6;
1111

1212
$u-type-primary: #2979ff;

0 commit comments

Comments
 (0)