Commit 95496a55 authored by wlxuqu's avatar wlxuqu

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

parent f4070f28
...@@ -3,27 +3,25 @@ ...@@ -3,27 +3,25 @@
<view class="u-demo-wrap" style="background-color: #FFFFFF;"> <view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-cell-group> <u-field
<u-field v-model="mobile"
v-model="mobile" label="手机号"
label="手机号" :error-message="errorMessage"
:error-message="errorMessage" placeholder="请填写手机号"
placeholder="请填写手机号" :required="required"
:required="required" :icon="icon1"
:icon="icon1" :type="type"
:type="type" >
> </u-field>
</u-field> <u-field
<u-field v-model="code"
v-model="code" label="验证码"
label="验证码" placeholder="请填写验证码"
placeholder="请填写验证码" :required="required"
:required="required" :icon="icon2"
:icon="icon2" >
> <u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button> </u-field>
</u-field>
</u-cell-group>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge> <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-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
</u-cell-item> </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="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
<u-icon slot="right-icon" size="34" name="calendar"></u-icon> <u-icon slot="right-icon" size="34" name="calendar"></u-icon>
<u-field slot="value"></u-field> <u-field slot="value"></u-field>
......
...@@ -46,11 +46,6 @@ ...@@ -46,11 +46,6 @@
index: 0, index: 0,
} }
}, },
provide() {
return {
uCellGroup: this
}
},
} }
</script> </script>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view <view
@tap="click" @tap="click"
class="u-cell" 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-stay-time="150"
:hover-class="hoverClass" :hover-class="hoverClass"
:style="{ :style="{
...@@ -51,7 +51,8 @@ ...@@ -51,7 +51,8 @@
* @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标 * @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标
* @property {String} value 右侧内容 * @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息 * @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 {Boolean} center 是否使内容垂直居中(默认false)
* @property {String} hover-class 是否开启点击反馈,none为无效果(默认true) * @property {String} hover-class 是否开启点击反馈,none为无效果(默认true)
* @property {Boolean} border-gap border-bottom为true时,Cell列表中间的条目的下边框是否与左边有一个间隔(默认true) * @property {Boolean} border-gap border-bottom为true时,Cell列表中间的条目的下边框是否与左边有一个间隔(默认true)
...@@ -89,11 +90,16 @@ export default { ...@@ -89,11 +90,16 @@ export default {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
// 是否显示边框 // 是否显示边框
borderBottom: { borderBottom: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否显示上边框
borderTop: {
type: Boolean,
default: false
},
// 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离 // 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离
borderGap: { borderGap: {
type: Boolean, type: Boolean,
...@@ -171,24 +177,11 @@ export default { ...@@ -171,24 +177,11 @@ export default {
default: 34 default: 34
} }
}, },
inject: {
uCellGroup: {
// 添加默认值,是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
default() {
return {
index: 0
}
}
}
},
data() { data() {
return { return {
itemIndex: 0
}; };
}, },
created() {
this.itemIndex = this.uCellGroup.index++;
},
computed: { computed: {
arrowStyle() { arrowStyle() {
let style = {}; let style = {};
......
<template> <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-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{ <view class="u-label" :class="[required ? 'u-required' : '']" :style="{
justifyContent: justifyContent, justifyContent: justifyContent,
...@@ -65,6 +65,8 @@ ...@@ -65,6 +65,8 @@
* @property {Object} field-style 自定义输入框的样式,对象形式 * @property {Object} field-style 自定义输入框的样式,对象形式
* @property {Number | String} clear-size 清除图标的大小,单位rpx(默认30) * @property {Number | String} clear-size 清除图标的大小,单位rpx(默认30)
* @property {String} input-align 输入框内容对齐方式(默认left) * @property {String} input-align 输入框内容对齐方式(默认left)
* @property {Boolean} border-bottom 是否显示field的下边框(默认true)
* @property {Boolean} border-top 是否显示field的上边框(默认false)
* @property {String} icon-color 左边通过icon配置的图标的颜色(默认#606266) * @property {String} icon-color 左边通过icon配置的图标的颜色(默认#606266)
* @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true) * @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true)
* @property {String Boolean} error-message 显示的错误提示内容,如果为空字符串或者false,则不显示错误信息 * @property {String Boolean} error-message 显示的错误提示内容,如果为空字符串或者false,则不显示错误信息
...@@ -169,20 +171,24 @@ export default { ...@@ -169,20 +171,24 @@ export default {
default() { default() {
return {} return {}
} }
} },
// 是否显示上边框
borderTop: {
type: Boolean,
default: false
},
// 是否显示下边框
borderBottom: {
type: Boolean,
default: true
},
}, },
inject: ['uCellGroup'],
data() { data() {
return { return {
focused: false, focused: false,
itemIndex: 0, itemIndex: 0,
}; };
}, },
created() {
if(this.uCellGroup) {
this.itemIndex = this.uCellGroup.index++;
}
},
computed: { computed: {
inputWrapStyle() { inputWrapStyle() {
let style = {}; let style = {};
...@@ -343,19 +349,6 @@ export default { ...@@ -343,19 +349,6 @@ export default {
align-items: center; 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 { .u-error-message {
color: $u-type-error; color: $u-type-error;
font-size: 26rpx; font-size: 26rpx;
......
...@@ -6,14 +6,18 @@ export default function getParent(name, keys) { ...@@ -6,14 +6,18 @@ export default function getParent(name, keys) {
while (parent) { while (parent) {
// 父组件 // 父组件
if (parent.$options.name !== name) { if (parent.$options.name !== name) {
// 如果组件的name不相等,继续上一级寻找
parent = parent.$parent; parent = parent.$parent;
} else { } else {
return keys.reduce((result, key) => { let data = {};
result[key] = parent[key]; // 历遍传过来的对象参数
return result; for(let i in keys) {
}, {}); // 如果父组件有此值则用,无此值则用默认值
data[i] = parent[i] ? parent[i] : keys[i];
}
return data;
} }
} }
return null; return {};
} }
\ No newline at end of file
...@@ -6,7 +6,7 @@ $u-main-color: #303133; ...@@ -6,7 +6,7 @@ $u-main-color: #303133;
$u-content-color: #606266; $u-content-color: #606266;
$u-tips-color: #909399; $u-tips-color: #909399;
$u-light-color: #c0c4cc; $u-light-color: #c0c4cc;
$u-border-color: #e4e7ed; $u-border-color: red;
$u-bg-color: #f3f4f6; $u-bg-color: #f3f4f6;
$u-type-primary: #2979ff; $u-type-primary: #2979ff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment