fix: cell 组件新增 no-border 属性 (#369)

This commit is contained in:
刘建东 2018-07-17 14:16:14 +08:00 committed by Yao
parent bcaf4095e6
commit bf652cb425
5 changed files with 70 additions and 59 deletions

View File

@ -53,7 +53,7 @@
bindtap="handleTap"
></zan-cell>
<block wx:if="{{ show }}">
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
<zan-cell no-border title="单行列表" label="附加描述" value="不想有 border"></zan-cell>
<zan-cell title="表单">
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
</zan-cell>

View File

@ -49,6 +49,7 @@
| title | String | 否 | 无 | 左侧标题 |
| label | Boolean | 否 | false | 标题下方的描述信息 |
| value | String | 否 | 取消 | 右侧内容 |
| noBorder | Boolean | 否 | false | 不显示下边线 |
| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 |
| url | String | 否 | - | 当 isLink 设置为 true 时,点击 cell 会尝试跳转到该路径 |
| linkType | String | 否 | navigateTo | 链接跳转类型,可选值为 `navigateTo``redirectTo``switchTab``reLaunch` |

View File

@ -43,7 +43,8 @@ Component({
url: {
type: String,
value: ''
}
},
noBorder: Boolean
},
data: {
isLastCell: true,

View File

@ -8,64 +8,73 @@
line-height: 1.4;
background-color: #fff;
font-size: 14px;
}
.zan-cell::after {
&::after {
@mixin hairline;
border-bottom-width: 1px;
left: 15px;
right: 0;
}
}
.zan-cell .zan-cell__icon {
&__icon {
margin-right: 5px;
}
.zan-cell .zan-cell__icon:empty {
display: none
}
.zan-cell__title {
&:empty {
display: none
}
}
&__title {
min-width: 65px;
padding-right: 10px;
}
.zan-cell__title:empty {
&:empty {
display: none;
}
}
}
.zan-cell__bd {
&__bd {
flex: 1;
}
.zan-cell__text {
}
&__text {
line-height: 24px;
font-size: 14px;
}
.zan-cell__desc {
}
&__desc {
line-height: 1.2;
font-size: 12px;
color: #666;
}
.zan-cell__ft {
}
&__ft {
position: relative;
text-align: right;
color: #666;
}
.zan-cell__no-pading{
}
&__no-pading{
padding: 0;
}
.zan-cell__no-pading .zan-cell__bd_padding {
.zan-cell__bd_padding {
padding: 12px 0 12px 15px;
}
.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{
.zan-form__input{
height: 26px;
}
.zan-cell__no-pading .zan-cell__ft_padding {
}
}
.zan-cell__ft_padding {
padding: 12px 15px 12px 0;
}
}
&.last-cell::after, &.no-border::after {
display: none;
}
}
.zan-cell.last-cell::after {
display: none;
}
.zan-cell--access .zan-cell__ft {
padding-right: 13px;

View File

@ -1,6 +1,6 @@
<view
catchtap="cellTap"
class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}"
class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }} {{ noBorder ? 'no-border' : ''}}"
>
<view class="zan-cell__icon">