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 <!-- 为了块对齐 -->
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 >
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"
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 () {
0 commit comments