blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Cell: optimize border (#1902)

Browse Source
This commit is contained in:
neverland 2018-10-09 11:47:28 +08:00 committed by GitHub
parent df9299457d
commit f5e114cf08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 102 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field"> <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>姓名</span> <div class="van-cell__title"><span>姓名</span>
<!----> <!---->
@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="收货人手机号" class="van-cell van-hairline van-field"> <div placeholder="收货人手机号" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>电话</span> <div class="van-cell__title"><span>电话</span>
<!----> <!---->
@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field"> <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>地区</span> <div class="van-cell__title"><span>地区</span>
<!----> <!---->
@ -53,11 +53,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-hairline van-address-edit-detail"> <div class="van-cell van-address-edit-detail">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field"> <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-hairline van-field"> <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>邮政编码</span> <div class="van-cell__title"><span>邮政编码</span>
<!----> <!---->
@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!----> <!---->
<div class="van-cell__title"><span>设为默认收货地址</span> <div class="van-cell__title"><span>设为默认收货地址</span>
<!----> <!---->

24
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`create a AddressEdit 1`] = ` exports[`create a AddressEdit 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field"> <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>姓名</span> <div class="van-cell__title"><span>姓名</span>
<!----> <!---->
@ -19,7 +19,7 @@ exports[`create a AddressEdit 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="收货人手机号" class="van-cell van-hairline van-field"> <div placeholder="收货人手机号" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>电话</span> <div class="van-cell__title"><span>电话</span>
<!----> <!---->
@ -35,7 +35,7 @@ exports[`create a AddressEdit 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field"> <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>地区</span> <div class="van-cell__title"><span>地区</span>
<!----> <!---->
@ -51,11 +51,11 @@ exports[`create a AddressEdit 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-hairline van-address-edit-detail"> <div class="van-cell van-address-edit-detail">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field"> <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
@ -113,7 +113,7 @@ exports[`create a AddressEdit 1`] = `
exports[`create a AddressEdit with props 1`] = ` exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field"> <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>姓名</span> <div class="van-cell__title"><span>姓名</span>
<!----> <!---->
@ -129,7 +129,7 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="收货人手机号" class="van-cell van-hairline van-field"> <div placeholder="收货人手机号" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>电话</span> <div class="van-cell__title"><span>电话</span>
<!----> <!---->
@ -145,7 +145,7 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field"> <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>地区</span> <div class="van-cell__title"><span>地区</span>
<!----> <!---->
@ -161,11 +161,11 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-hairline van-address-edit-detail"> <div class="van-cell van-address-edit-detail">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field"> <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
@ -184,7 +184,7 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-hairline van-field"> <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>邮政编码</span> <div class="van-cell__title"><span>邮政编码</span>
<!----> <!---->
@ -200,7 +200,7 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!----> <!---->
<div class="van-cell__title"><span>设为默认收货地址</span> <div class="van-cell__title"><span>设为默认收货地址</span>
<!----> <!---->

6
packages/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-address-list"> <div class="van-address-list">
<div class="van-radio-group"> <div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline van-address-item"> <div class="van-cell van-cell--clickable van-address-item">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-cell van-cell--clickable van-hairline van-address-item"> <div class="van-cell van-cell--clickable van-address-item">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div> <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline van-address-item van-address-item--disabled"> <div class="van-cell van-address-item van-address-item--disabled">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">

4
packages/button/test/__snapshots__/demo.spec.js.snap
View File

@ -11,8 +11,8 @@ exports[`renders demo correctly 1`] = `
<button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
</div> </div>
<div> <div>
<button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">警告按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
<button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
</div> </div>
<div> <div>
<button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>

4
packages/cell/index.vue
View File

@ -4,9 +4,9 @@
b({ b({
center, center,
required, required,
borderless: !border,
clickable: isLink || clickable clickable: isLink || clickable
}), })
{ 'van-hairline': border }
]" ]"
@click="onClick" @click="onClick"
> >

20
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->
@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"><span>内容</span></div> <div class="van-cell__value"><span>内容</span></div>
<!----> <!---->
</div> </div>
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<div class="van-cell__label">描述信息</div> <div class="van-cell__label">描述信息</div>
@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"><span>内容</span></div> <div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline"> <div class="van-cell">
<i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->
@ -58,7 +58,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->
@ -68,7 +68,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->
@ -82,7 +82,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->

6
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -91,7 +91,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>复选框a</span> <div class="van-cell__title"><span>复选框a</span>
<!----> <!---->
@ -108,7 +108,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>复选框b</span> <div class="van-cell__title"><span>复选框b</span>
<!----> <!---->
@ -125,7 +125,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>复选框c</span> <div class="van-cell__title"><span>复选框c</span>
<!----> <!---->

16
packages/collapse/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-hairline--top-bottom van-collapse"> <div class="van-hairline--top-bottom van-collapse">
<div class="van-collapse-item"> <div class="van-collapse-item">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded"> <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
<!----> <!---->
<div class="van-cell__title"><span>有赞微商城</span> <div class="van-cell__title"><span>有赞微商城</span>
<!----> <!---->
@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<!----> <!---->
<div class="van-cell__title"><span>有赞零售</span> <div class="van-cell__title"><span>有赞零售</span>
<!----> <!---->
@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div disabled="disabled" class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--disabled"> <div disabled="disabled" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
<!----> <!---->
<div class="van-cell__title"><span>有赞美业</span> <div class="van-cell__title"><span>有赞美业</span>
<!----> <!---->
@ -50,7 +50,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-hairline--top-bottom van-collapse"> <div class="van-hairline--top-bottom van-collapse">
<div class="van-collapse-item"> <div class="van-collapse-item">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded"> <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
<!----> <!---->
<div class="van-cell__title"><span>有赞微商城</span> <div class="van-cell__title"><span>有赞微商城</span>
<!----> <!---->
@ -65,7 +65,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<!----> <!---->
<div class="van-cell__title"><span>有赞零售</span> <div class="van-cell__title"><span>有赞零售</span>
<!----> <!---->
@ -78,7 +78,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<!----> <!---->
<div class="van-cell__title"><span>有赞美业</span> <div class="van-cell__title"><span>有赞美业</span>
<!----> <!---->
@ -95,7 +95,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-hairline--top-bottom van-collapse"> <div class="van-hairline--top-bottom van-collapse">
<div class="van-collapse-item"> <div class="van-collapse-item">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<!----> <!---->
<div class="van-cell__title"> <div class="van-cell__title">
<div>有赞微商城 <div>有赞微商城
@ -112,7 +112,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>

10
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell van-cell--center van-cell--clickable van-contact-card van-contact-card--add"> <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add">
<i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-contact-list"> <div class="van-contact-list">
<div class="van-radio-group"> <div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;"> <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-contact-edit"> <div class="van-contact-edit">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-hairline van-field"> <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>张三</span> <div class="van-cell__title"><span>张三</span>
<!----> <!---->
@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="请填写电话" class="van-cell van-hairline van-field"> <div placeholder="请填写电话" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>电话</span> <div class="van-cell__title"><span>电话</span>
<!----> <!---->
@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell van-cell--center van-contact-card van-contact-card--edit"> <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
<i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>

2
packages/coupon-list/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell"> <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>优惠券</span> <div class="van-cell__title"><span>优惠券</span>
<!----> <!---->

4
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`coupon cell 1`] = ` exports[`coupon cell 1`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell"> <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>优惠券</span> <div class="van-cell__title"><span>优惠券</span>
<!----> <!---->
@ -17,7 +17,7 @@ exports[`coupon cell 1`] = `
exports[`coupon cell 2`] = ` exports[`coupon cell 2`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell"> <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>优惠券</span> <div class="van-cell__title"><span>优惠券</span>
<!----> <!---->

4
packages/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
<div name="van-dialog-bounce" class="van-dialog" style="display:none;"> <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
<!----> <!---->
<div class="van-dialog__content"> <div class="van-dialog__content">
<div placeholder="请输入用户名" class="van-cell van-hairline van-field"> <div placeholder="请输入用户名" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>用户名</span> <div class="van-cell__title"><span>用户名</span>
<!----> <!---->
@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="请输入密码" class="van-cell van-hairline van-field"> <div placeholder="请输入密码" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>密码</span> <div class="van-cell__title"><span>密码</span>
<!----> <!---->

16
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-hairline van-field"> <div placeholder="请输入用户名" class="van-cell van-field">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field"> <div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
<!----> <!---->
<div class="van-cell__title"><span>用户名</span> <div class="van-cell__title"><span>用户名</span>
<!----> <!---->
@ -42,7 +42,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="请输入密码" class="van-cell van-cell--required van-hairline van-field"> <div placeholder="请输入密码" class="van-cell van-cell--required van-field">
<!----> <!---->
<div class="van-cell__title"><span>密码</span> <div class="van-cell__title"><span>密码</span>
<!----> <!---->
@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div disabled="disabled" class="van-cell van-hairline van-field"> <div disabled="disabled" class="van-cell van-field">
<i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -84,7 +84,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-hairline van-field van-field--error"> <div placeholder="请输入用户名" class="van-cell van-field van-field--error">
<!----> <!---->
<div class="van-cell__title"><span>用户名</span> <div class="van-cell__title"><span>用户名</span>
<!----> <!---->
@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div placeholder="请输入手机号" class="van-cell van-hairline van-field"> <div placeholder="请输入手机号" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>手机号</span> <div class="van-cell__title"><span>手机号</span>
<!----> <!---->
@ -120,7 +120,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入留言" rows="1" class="van-cell van-hairline van-field"> <div placeholder="请输入留言" rows="1" class="van-cell van-field">
<!----> <!---->
<div class="van-cell__title"><span>留言</span> <div class="van-cell__title"><span>留言</span>
<!----> <!---->
@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field"> <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
<!----> <!---->
<div class="van-cell__title"><span>短信验证码</span> <div class="van-cell__title"><span>短信验证码</span>
<!----> <!---->

2
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render textarea 1`] = ` exports[`render textarea 1`] = `
<div class="van-cell van-hairline van-field"> <div class="van-cell van-field">
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">

4
packages/panel/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom van-panel"> <div class="van-cell-group van-hairline--top-bottom van-panel">
<div class="van-cell van-hairline van-panel__header"> <div class="van-cell van-panel__header">
<!----> <!---->
<div class="van-cell__title"><span>标题</span> <div class="van-cell__title"><span>标题</span>
<div class="van-cell__label">描述信息</div> <div class="van-cell__label">描述信息</div>
@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom van-panel"> <div class="van-cell-group van-hairline--top-bottom van-panel">
<div class="van-cell van-hairline van-panel__header"> <div class="van-cell van-panel__header">
<!----> <!---->
<div class="van-cell__title"><span>标题</span> <div class="van-cell__title"><span>标题</span>
<div class="van-cell__label">描述信息</div> <div class="van-cell__label">描述信息</div>

4
packages/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-radio-group"> <div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>单选框1</span> <div class="van-cell__title"><span>单选框1</span>
<!----> <!---->
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="van-cell van-cell--clickable van-hairline"> <div class="van-cell van-cell--clickable">
<!----> <!---->
<div class="van-cell__title"><span>单选框2</span> <div class="van-cell__title"><span>单选框2</span>
<!----> <!---->

6
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-search" style="background:#f2f2f2;"> <div class="van-search" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-field"> <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<form action="/"> <form action="/">
<div class="van-search van-search--show-action" style="background:#f2f2f2;"> <div class="van-search van-search--show-action" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-field"> <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
@ -50,7 +50,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-search van-search--show-action" style="background:#f2f2f2;"> <div class="van-search van-search--show-action" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-field"> <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>

4
packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);"> <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"><span>选择</span></div> <div class="van-swipe-cell__left"><span>选择</span></div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->
@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);"> <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"><span>选择</span></div> <div class="van-swipe-cell__left"><span>选择</span></div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline"> <div class="van-cell">
<!----> <!---->
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
<!----> <!---->

6
packages/switch-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!----> <!---->
<div class="van-cell__title"><span>标题</span> <div class="van-cell__title"><span>标题</span>
<!----> <!---->
@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!----> <!---->
<div class="van-cell__title"><span>标题</span> <div class="van-cell__title"><span>标题</span>
<!----> <!---->
@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!----> <!---->
<div class="van-cell__title"><span>标题</span> <div class="van-cell__title"><span>标题</span>
<!----> <!---->

7
packages/vant-css/src/cell.css
View File

@ -13,8 +13,11 @@
overflow: hidden; overflow: hidden;
&:not(:last-child)::after { &:not(:last-child)::after {
margin-left: 15px; @include hairline-bottom($border-color, 15px);
border-bottom-width: 1px; }
&--borderless::after {
display: none;
} }
&-group { &-group {

23
packages/vant-css/src/mixins/hairline.css
View File

@ -1,12 +1,27 @@
@mixin hairline($border-color: #eee) { @mixin hairline-common() {
content: ''; content: ' ';
position: absolute; position: absolute;
pointer-events: none;
box-sizing: border-box;
}
@mixin hairline($border-color: #eee) {
@include hairline-common;
top: -50%; top: -50%;
left: -50%; left: -50%;
right: -50%; right: -50%;
bottom: -50%; bottom: -50%;
transform: scale(0.5); transform: scale(0.5);
pointer-events: none;
box-sizing: border-box;
border: 0 solid $border-color; border: 0 solid $border-color;
} }
@mixin hairline-bottom($border-color: #eee, $left: 0) {
@include hairline-common;
left: $left;
right: 0;
bottom: 0;
transform: scaleY(0.5);
border-bottom: 1px solid $border-color;
}