Skip to content

Commit abfb121

Browse files
wlxuquwlxuqu
committed
1. 修复field类型变成password的问题
2. 修复u-form-item的label-align无效的问题 3. 修复alert-tips组件border-color和bg-color作用对象颠倒的问题
1 parent 5270afd commit abfb121

File tree

11 files changed

+83
-154
lines changed

11 files changed

+83
-154
lines changed

‎pages.json

Lines changed: 8 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/componentsA/select/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsB/steps/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{

‎pages/componentsC/test/index.vue

Lines changed: 12 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,20 @@
11
<template>
22
<view>
3-
<u-select v-model="show" @confirm="confirm" :list="list"></u-select>
4-
<u-button @click="show = true">打开</u-button>
3+
<u-field></u-field>
4+
<u-button @click="password = !password"></u-button>
55
</view>
66
</template>
77

88
<script>
9-
export default {
10-
data() {
11-
return {
12-
show: false,
13-
list: [
14-
{
15-
label: '测试',
16-
value: 'b0da629fa36e32110ea86dbfc53db96a',
17-
extra: {
18-
ductId: 'b0da629fa36e32110ea86dbfc53db96a',
19-
name: '测试',
20-
type: 3,
21-
imgUrl: '1594173070713.jpg',
22-
effectiveDay: 4,
23-
dateType: 'day',
24-
isInlay: 1,
25-
createTime: '2020-07-08 09:51:13',
26-
printerNum: 3,
27-
createBy: '1',
28-
updateTime: '2020-07-08 09:51:13',
29-
updateBy: null,
30-
ductAccessoryInfoList: []
31-
}
32-
},
33-
{
34-
label: 'PICC - 2类',
35-
value: '1c0c70fafe74e840dc79f1bfe2833b2b',
36-
extra: {
37-
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
38-
name: 'PICC - 2类',
39-
type: 3,
40-
imgUrl: '1592987125427.jpeg',
41-
effectiveDay: 7,
42-
dateType: 'day',
43-
isInlay: 1,
44-
createTime: '2020-06-24 16:25:25',
45-
printerNum: 1,
46-
createBy: '1',
47-
updateTime: '2020-07-09 12:01:02',
48-
updateBy: null,
49-
ductAccessoryInfoList: [
50-
{
51-
ductAccessoryId: 'aecdc0e314dcb346a5ec1838929c02e6',
52-
name: '敷贴 - 2类',
53-
type: 1,
54-
imgUrl: '',
55-
effectiveDay: 3,
56-
createTime: '2020-06-24 16:26:01',
57-
createBy: '1',
58-
updateTime: '2020-07-09 12:02:25',
59-
dateType: 'day',
60-
updateBy: null,
61-
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
62-
printerNum: 2
63-
},
64-
{
65-
ductAccessoryId: 'cea78c669259529a6e66cd0d3b7ea357',
66-
name: '敷贴 - 1类',
67-
type: 1,
68-
imgUrl: '1592987145754.jpeg',
69-
effectiveDay: 7,
70-
createTime: '2020-06-24 16:25:46',
71-
createBy: '1',
72-
updateTime: '2020-07-09 12:04:29',
73-
dateType: 'day',
74-
updateBy: null,
75-
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
76-
printerNum: 2
77-
}
78-
]
79-
}
80-
},
81-
{
82-
label: 'PICC - 1类',
83-
value: '903a262182003743bb3062fe7393ffbd',
84-
extra: {
85-
ductId: '903a262182003743bb3062fe7393ffbd',
86-
name: 'PICC - 1类',
87-
type: 3,
88-
imgUrl: '1592987111641.jpeg',
89-
effectiveDay: 56,
90-
dateType: 'hour',
91-
isInlay: 1,
92-
createTime: '2020-06-24 16:25:12',
93-
printerNum: 1,
94-
createBy: '1',
95-
updateTime: '2020-07-09 14:24:02',
96-
updateBy: null,
97-
ductAccessoryInfoList: []
98-
}
99-
}
100-
]
101-
};
102-
},
103-
methods: {
104-
confirm(e) {
105-
console.log(e);
106-
}
9+
export default {
10+
data() {
11+
return {
12+
password: false
13+
}
14+
},
10715
}
108-
};
10916
</script>
17+
18+
<style>
19+
20+
</style>

‎uview-ui/components/u-alert-tips/u-alert-tips.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
type ? 'u-alert-tips--bg--' + type + '-light' : '',
55
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
66
]" :style="{
7-
backgroundColor: borderColor,
8-
borderColor: bgColor
7+
backgroundColor: bgColor,
8+
borderColor: borderColor
99
}">
1010
<view class="u-icon-wrap">
1111
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="type"></u-icon>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
* @property {String Number} max 最多能选中多少个checkbox（默认999）
1414
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
1515
* @property {Boolean} disabled 是否禁用所有checkbox（默认false）
16+
* @property {String Number} icon-size 图标大小，单位rpx（默认20）
17+
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
1618
* @property {String} width 宽度，需带单位
19+
* @property {String} width 宽度，需带单位
20+
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
1721
* @property {Boolean} wrap 是否每个checkbox都换行（默认false）
1822
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
1923
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
* checkbox 复选框
1717
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
1818
* @tutorial https://www.uviewui.com/components/checkbox.html
19-
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
19+
* @property {String Number} icon-size 图标大小，单位rpx（默认20）
2020
* @property {String Number} label-size label字体大小，单位rpx（默认28）
2121
* @property {String Number} name checkbox组件的标示符
2222
* @property {String} shape 形状，见官网说明（默认circle）
23-
* @property {Boolean} disabled 是否禁用（默认false）
24-
* @property {Boolean} label-disabled 点击文本是否可以操作checkbox（默认true）
23+
* @property {Boolean} disabled 是否禁用
24+
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
2525
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
2626
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
2727
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
@@ -46,13 +46,13 @@
4646
},
4747
// 是否禁用
4848
disabled: {
49-
type: Boolean,
50-
default: false
49+
type: [Boolean, String],
50+
default: ''
5151
},
5252
// 是否禁止点击提示语选中复选框
5353
labelDisabled: {
54-
type: Boolean,
55-
default: false
54+
type: [Boolean, String],
55+
default: ''
5656
},
5757
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
5858
activeColor: {
@@ -90,11 +90,11 @@
9090
computed: {
9191
// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
9292
isDisabled() {
93-
return this.parent ? this.parent.disabled || this.disabled : this.disabled;
93+
return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
9494
},
9595
// 是否禁用label点击
9696
isLabelDisabled() {
97-
return this.parent ? this.parent.labelDisabled || this.labelDisabled : this.labelDisabled;
97+
return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
9898
},
9999
// 组件尺寸，对应size的值，默认值为34rpx
100100
checkboxSize() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
:type="type"
2424
class="u-flex-1 u-field__input-wrap"
2525
:value="value"
26-
:password="type === 'password' ? 'text' : type"
26+
:password="password || this.type === 'password'"
2727
:placeholder="placeholder"
2828
:placeholderStyle="placeholderStyle"
2929
:disabled="disabled"

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

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<view class="u-form-item" :class="{'u-border-bottom': parentParam.borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
2+
<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
33
<view class="u-form-item__body" :style="{
4-
flexDirection: parentParam.labelPosition == 'left' ? 'row' : 'column'
4+
flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
55
}">
66
<view class="u-form-item--left" :style="{
7-
width: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%',
8-
flex: `0 0 ${parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%'}`,
9-
marginBottom: parentParam.labelPosition == 'left' ? 0 : '10rpx',
7+
width: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%',
8+
flex: `0 0 ${elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%'}`,
9+
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
1010
1111
}">
1212
<!-- 为了块对齐 -->
@@ -16,8 +16,8 @@
1616
<view class="u-form-item--left__content__icon" v-if="leftIcon">
1717
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
1818
</view>
19-
<view class="u-form-item--left__content__label" :style="[parentParam.labelStyle, {
20-
'justify-content': parentParam.labelAlign == 'left' ? 'flex-star' : parentParam.labelAlign == 'center' ? 'center' : 'flex-end'
19+
<view class="u-form-item--left__content__label" :style="[elLabelStyle, {
20+
'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
2121
}]">
2222
{{label}}
2323
</view>
@@ -36,7 +36,7 @@
3636
</view>
3737
</view>
3838
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
39-
paddingLeft: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '0',
39+
paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
4040
}">{{validateMessage}}</view>
4141
</view>
4242
</template>
@@ -53,11 +53,11 @@ schema.warning = function(){};
5353
* @tutorial http://uviewui.com/components/form.html
5454
* @property {String} label 左侧提示文字
5555
* @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
56-
* @property {Boolean} border-bottom 是否显示表单域的下划线边框(默认true)
57-
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方(默认left)
56+
* @property {Boolean} border-bottom 是否显示表单域的下划线边框
57+
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
5858
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
5959
* @property {Object} label-style lable的样式，对象形式
60-
* @property {String} label-align lable的对齐方式(默认left)
60+
* @property {String} label-align lable的对齐方式
6161
* @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
6262
* @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
6363
* @property {Object} left-icon-style 左侧图标的样式，对象形式
@@ -100,7 +100,7 @@ export default {
100100
// label的宽度，单位rpx
101101
labelWidth: {
102102
type: [String, Number],
103-
default: 90
103+
default: ''
104104
},
105105
// lable的样式，对象形式
106106
labelStyle: {
@@ -151,26 +151,12 @@ export default {
151151
validateState: '', // 是否校验成功
152152
validateMessage: '' ,// 校验失败的提示语
153153
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
154-
// border-bottom-下边框呈现红色，none-无提示
155154
errorType: ['message'],
156-
parentParam: {
157-
labelStyle: {}, // lable的样式，对象形式
158-
labelAlign: '', // lable的对齐方式
159-
labelWidth: '', // 提示文字的宽度，单位rpx
160-
labelPosition: '', // 表单域提示文字的位置
161-
borderBottom: '', // 是否显示表单域的下划线边框
162-
}
163155
};
164156
},
165157
created() {
166-
// 如果子组件有值，优先使用子组件的，否则使用u-from提供的值
167-
this.parentParam = this.$u.getParent.call(this, 'u-form', {
168-
labelStyle: this.labelStyle,
169-
labelWidth: this.labelWidth,
170-
labelPosition: this.labelPosition,
171-
borderBottom: this.borderBottom,
172-
labelAlign: this.labelAlign
173-
});
158+
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
159+
this.parent = this.$u.$parent.call(this, 'u-form');
174160
},
175161
watch: {
176162
validateState(val) {
@@ -180,7 +166,7 @@ export default {
180166
"uForm.errorType"(val) {
181167
this.errorType = val;
182168
this.broadcastInputError();
183-
}
169+
},
184170
},
185171
computed: {
186172
fieldValue() {
@@ -194,6 +180,28 @@ export default {
194180
else return false;
195181
}
196182
},
183+
// label的宽度
184+
elLabelWidth() {
185+
// label默认宽度为90，优先使用本组件的值，如果没有，则用u-form的值
186+
return this.labelWidth ? this.labelWidth : (this.parent ? this.parent.labelWidth : 90);
187+
},
188+
// label的样式
189+
elLabelStyle() {
190+
return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parent ? this.parent.labelStyle : {});
191+
},
192+
// label的位置，左侧或者上方
193+
elLabelPosition() {
194+
return this.labelPosition ? this.labelPosition : (this.parent ? this.parent.labelPosition : 'left');
195+
},
196+
// label的对齐方式
197+
elLabelAlign() {
198+
return this.labelAlign ? this.labelAlign : (this.parent ? this.parent.labelAlign : 'left');
199+
},
200+
// label的下划线
201+
elBorderBottom() {
202+
// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值
203+
return this.borderBottom !== '' ? this.borderBottom : this.parent ? this.parent.borderBottom : true;
204+
}
197205
},
198206
methods: {
199207
broadcastInputError() {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
99
* @tutorial http://uviewui.com/components/form.html
1010
* @property {Object} model 表单数据对象
11+
* @property {Boolean} border-bottom 是否显示表单域的下划线边框
12+
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
13+
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
14+
* @property {Object} label-style lable的样式，对象形式
15+
* @property {String} label-align lable的对齐方式
1116
* @property {Object} rules 通过ref设置，见官网说明
1217
* @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
1318
* @example <u-form :model="form" ref="uForm"></u-form>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<view v-if="visibleSync" :style="[customStyle, {
33
zIndex: uZindex - 1
44
}]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer">
5-
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
5+
<u-mask :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
66
<view
77
class="u-drawer-content"
88
@tap="modeCenterClose(mode)"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
2020
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
2121
* @property {String Number} font-size 字体大小，单位rpx（默认28）
22+
* @property {String Number} height 组件高度，单位rpx（默认70）
2223
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
2324
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
2425
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
@@ -350,6 +351,6 @@
350351
display: flex;
351352
align-items: center;
352353
position: relative;
353-
z-index: 99;
354+
z-index: 3;
354355
}
355356
</style>

0 commit comments

Comments
 (0)