优化cell和filed组件，无需强制结合ceel-group使用

wlxuqu · wlxuqu · commit 95496a55ba6e · 2020-06-24T22:59:39.000+08:00
diff --git a/pages/componentsA/field/index.vue b/pages/componentsA/field/index.vue
@@ -3,27 +3,25 @@
 		<view class="u-demo-wrap" style="background-color: #FFFFFF;">
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
-				<u-cell-group>
-					<u-field
-						v-model="mobile"
-						label="手机号"
-						:error-message="errorMessage"
-						placeholder="请填写手机号"
-						:required="required"
-						:icon="icon1"
-						:type="type"
-					>
-					</u-field>
-					<u-field
-						v-model="code"
-						label="验证码"
-						placeholder="请填写验证码"
-						:required="required"
-						:icon="icon2"
-					>
-						<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
-					</u-field>
-				</u-cell-group>
+				<u-field
+					v-model="mobile"
+					label="手机号"
+					:error-message="errorMessage"
+					placeholder="请填写手机号"
+					:required="required"
+					:icon="icon1"
+					:type="type"
+				>
+				</u-field>
+				<u-field
+					v-model="code"
+					label="验证码"
+					placeholder="请填写验证码"
+					:required="required"
+					:icon="icon2"
+				>
+					<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
+				</u-field>
 			</view>
 		</view>
 		<view class="u-config-wrap">
diff --git a/pages/componentsC/cell/index.vue b/pages/componentsC/cell/index.vue
@@ -12,7 +12,7 @@
 						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
 						<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
 					</u-cell-item>
-					<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
+					<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
 						<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
 						<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
 						<u-field slot="value"></u-field>
diff --git a/uview-ui/components/u-cell-group/u-cell-group.vue b/uview-ui/components/u-cell-group/u-cell-group.vue
@@ -46,11 +46,6 @@
 				index: 0,
 			}
 		},
-		provide() {
-			return {
-				uCellGroup: this
-			}
-		},
 	}
 </script>
 
diff --git a/uview-ui/components/u-cell-item/u-cell-item.vue b/uview-ui/components/u-cell-item/u-cell-item.vue
@@ -2,7 +2,7 @@
 	<view
 		@tap="click"
 		class="u-cell"
-		:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
+		:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
 		hover-stay-time="150"
 		:hover-class="hoverClass"
 		:style="{
@@ -51,7 +51,8 @@
  * @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
  * @property {String} value 右侧内容
  * @property {String} label 标题下方的描述信息
- * @property {Boolean} border-bottom 是否显示每个cell的下边框（默认true）
+ * @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
+ * @property {Boolean} border-top 是否显示cell的上边框（默认false）
  * @property {Boolean} center 是否使内容垂直居中（默认false）
  * @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
  * @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
@@ -89,11 +90,16 @@ export default {
 			type: [String, Number],
 			default: ''
 		},
-		// 是否显示内边框
+		// 是否显示下边框
 		borderBottom: {
 			type: Boolean,
 			default: true
 		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
 		// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
 		borderGap: {
 			type: Boolean,
@@ -171,24 +177,11 @@ export default {
 			default: 34
 		}
 	},
-	inject: {
-		uCellGroup: {
-			// 添加默认值，是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
-			default() {
-				return {
-					index: 0
-				}
-			}
-		}
-	},
 	data() {
 		return {
-			itemIndex: 0
+			
 		};
 	},
-	created() {
-		this.itemIndex = this.uCellGroup.index++;
-	},
 	computed: {
 		arrowStyle() {
 			let style = {};
diff --git a/uview-ui/components/u-field/u-field.vue b/uview-ui/components/u-field/u-field.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="u-field" :class="{'u-field-border': itemIndex > 0 }">
+	<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
 		<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
 			<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
 				justifyContent: justifyContent, 
@@ -65,6 +65,8 @@
  * @property {Object} field-style 自定义输入框的样式，对象形式
  * @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
  * @property {String} input-align 输入框内容对齐方式（默认left）
+ * @property {Boolean} border-bottom 是否显示field的下边框（默认true）
+ * @property {Boolean} border-top 是否显示field的上边框（默认false）
  * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
  * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
  * @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
@@ -169,20 +171,24 @@ export default {
 			default() {
 				return {}
 			}
-		}
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
 	},
-	inject: ['uCellGroup'],
 	data() {
 		return {
 			focused: false,
 			itemIndex: 0,
 		};
 	},
-	created() {
-		if(this.uCellGroup) {
-			this.itemIndex = this.uCellGroup.index++;
-		}
-	},
 	computed: {
 		inputWrapStyle() {
 			let style = {};
@@ -343,19 +349,6 @@ export default {
 	align-items: center;
 }
 
-.u-field-border:after {
-	left: 32rpx!important;
-	position: absolute;
-	box-sizing: border-box;
-	content: ' ';
-	pointer-events: none;
-	right: 0;
-	top: 0;
-	border-bottom: 1px solid $u-border-color;
-	-webkit-transform: scaleY(0.5);
-	transform: scaleY(0.5);
-}
-
 .u-error-message {
 	color: $u-type-error;
 	font-size: 26rpx;
diff --git a/uview-ui/libs/function/getParent.js b/uview-ui/libs/function/getParent.js
@@ -6,14 +6,18 @@ export default function getParent(name, keys) {
 	while (parent) {
 		// 父组件
 		if (parent.$options.name !== name) {
+			// 如果组件的name不相等，继续上一级寻找
 			parent = parent.$parent;
 		} else {
-			return keys.reduce((result, key) => {
-				result[key] = parent[key];
-				return result;
-			}, {});
+			let data = {};
+			// 历遍传过来的对象参数
+			for(let i in keys) {
+				// 如果父组件有此值则用，无此值则用默认值
+				data[i] = parent[i] ? parent[i] : keys[i];
+			}
+			return data;
 		}
 	}
 
-	return null;
+	return {};
 }
diff --git a/uview-ui/theme.scss b/uview-ui/theme.scss
@@ -6,7 +6,7 @@ $u-main-color: #303133;
 $u-content-color: #606266;
 $u-tips-color: #909399;
 $u-light-color: #c0c4cc;
-$u-border-color: #e4e7ed;
+$u-border-color: red;
 $u-bg-color: #f3f4f6;
 
 $u-type-primary: #2979ff;

Original file line number	Diff line number	Diff line change
`@@ -46,11 +46,6 @@`
`46`	`46`	`index: 0,`
`47`	`47`	`}`
`48`	`48`	`},`
`49`		`- provide() {`
`50`		`- return {`
`51`		`- uCellGroup: this`
`52`		`- }`
`53`		`- },`
`54`	`49`	`}`
`55`	`50`	`</script>`
`56`	`51`