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] avoid use cell selector (#2714)

Browse Source
This commit is contained in:
neverland 2019-02-11 19:03:36 +08:00 committed by GitHub
parent 9c4ad97731
commit 9947ab00e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 58 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,19 +5,19 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-address-edit">
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
</div>
@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<div class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<div class="van-cell__title"><span>邮政编码</span></div>
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>
</div>

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

@ -3,19 +3,19 @@
exports[`create a AddressEdit 1`] = `
<div class="van-address-edit">
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
</div>
@ -23,7 +23,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<div class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
@ -60,19 +60,19 @@ exports[`create a AddressEdit 1`] = `
exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit">
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="北京市/朝阳区" class="van-field__control"></div>
</div>
@ -80,7 +80,7 @@ exports[`create a AddressEdit with props 1`] = `
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<div class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea></div>
</div>
@ -88,7 +88,7 @@ exports[`create a AddressEdit with props 1`] = `
</div>
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<div class="van-cell__title"><span>邮政编码</span></div>
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"></div>
</div>

1
packages/address-list/Item.js
View File

@ -45,6 +45,7 @@ export default sfc({
return (
<Cell
class={bem({ disabled, unswitchable: !switchable })}
value-class={bem('value')}
isLink={!disabled && switchable}
scopedSlots={{
default: this.renderContent,

2
packages/address-list/index.less
View File

@ -23,7 +23,7 @@
.van-address-item {
padding: 15px;
.van-cell__value {
&__value {
color: @text-color;
padding-right: 34px;
position: relative;

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-radio-group">
<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 van-address-item__value">
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<!----></i>
</div>
<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 van-address-item__value">
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">王五，1320000000</div>
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit">

3
packages/contact-card/index.js
View File

@ -28,8 +28,9 @@ export default sfc({
<Cell
center
border={false}
class={bem([type])}
isLink={editable}
class={bem([type])}
value-class={bem('value')}
icon={type === 'edit' ? 'contact' : 'add-square'}
onClick={event => {
if (editable && listeners.click) {

4
packages/contact-card/index.less
View File

@ -3,7 +3,7 @@
.van-contact-card {
padding: 15px;
.van-cell__value {
&__value {
margin-left: 5px;
line-height: 20px;
display: inline-block;
@ -11,7 +11,7 @@
}
&--add {
.van-cell__value {
.van-contact-card__value {
line-height: 40px;
}

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

@ -5,14 +5,14 @@ exports[`renders demo correctly 1`] = `
<div>
<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-add-square van-cell__left-icon">
<!----></i>
<div class="van-cell__value van-cell__value--alone">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-contact-list">
<div class="van-radio-group van-contact-list__group">
<div class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-cell--clickable van-contact-list__item">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
@ -26,13 +26,13 @@ exports[`renders demo correctly 1`] = `
<div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-contact-edit">
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
<div class="van-cell__title"><span>张三</span></div>
<div class="van-cell__title van-field__label"><span>张三</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请填写电话" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control"></div>
</div>
@ -44,7 +44,7 @@ exports[`renders demo correctly 1`] = `
<div>
<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">
<!----></i>
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell__value van-cell__value--alone van-contact-card__value">
<div>张三：张三</div>
<div>电话：13000000000</div>
</div>

2
packages/contact-list/index.js
View File

@ -23,6 +23,8 @@ export default sfc({
<Cell
key={item.id}
isLink
class={bem('item')}
value-class={bem('item-value')}
scopedSlots={{
default: () => (
<Radio name={item.id}>

4
packages/contact-list/index.less
View File

@ -5,11 +5,11 @@
padding-bottom: 50px;
box-sizing: border-box;
.van-cell {
&__item {
padding: 15px;
}
.van-cell__value {
&__item-value {
color: @text-color;
padding-right: 34px;
position: relative;

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

@ -16,13 +16,13 @@ exports[`renders demo correctly 1`] = `
<div name="van-dialog-bounce" class="van-dialog" style="display:none;">
<div class="van-dialog__content">
<div placeholder="请输入用户名" class="van-cell van-field">
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请输入密码" class="van-cell van-field">
<div class="van-cell__title"><span>密码</span></div>
<div class="van-cell__title van-field__label"><span>密码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control"></div>
</div>

1
packages/field/index.js
View File

@ -220,6 +220,7 @@ export default sfc({
border={this.border}
isLink={this.isLink}
required={this.required}
title-class={bem('label', labelAlign)}
class={bem({
error: this.error,
disabled: this.$attrs.disabled,

24
packages/field/index.less
View File

@ -1,8 +1,16 @@
@import '../style/var';
.van-field {
.van-cell__title {
&__label {
max-width: 90px;
&--center {
text-align: center;
}
&--right {
text-align: right;
}
}
&__body {
@ -111,18 +119,4 @@
min-height: 60px;
}
}
&--label {
&-center {
.van-cell__title {
text-align: center;
}
}
&-right {
.van-cell__title {
text-align: right;
}
}
}
}

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

@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-question-o">
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div placeholder="请输入密码" class="van-cell van-cell--required van-field">
<div class="van-cell__title"><span>密码</span></div>
<div class="van-cell__title van-field__label"><span>密码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control"></div>
</div>
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
<div disabled="disabled" class="van-cell van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-contact">
<!----></i></div>
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control"></div>
</div>
@ -45,13 +45,13 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-field van-field--error">
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请输入手机号" class="van-cell van-field">
<div class="van-cell__title"><span>手机号</span></div>
<div class="van-cell__title van-field__label"><span>手机号</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
<div class="van-field__error-message">手机号格式错误</div>
@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入留言" rows="1" class="van-cell van-field">
<div class="van-cell__title"><span>留言</span></div>
<div class="van-cell__title van-field__label"><span>留言</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
</div>
@ -72,7 +72,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
<div class="van-cell__title"><span>短信验证码</span></div>
<div class="van-cell__title van-field__label"><span>短信验证码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">

3
packages/panel/index.js
View File

@ -22,11 +22,12 @@ export default sfc({
<CellGroup class={bem()} {...context.data}>
{slots.header || (
<Cell
class={bem('header')}
icon={props.icon}
label={props.desc}
title={props.title}
value={props.status}
class={bem('header')}
value-class={bem('header-value')}
/>
)}
<div class={bem('content')}>{slots.default}</div>

6
packages/panel/index.less
View File

@ -3,10 +3,8 @@
.van-panel {
background: @white;
&__header {
.van-cell__value {
color: @red;
}
&__header-value {
color: @red;
}
&__footer {

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

@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__title"><span>标题</span>
<div class="van-cell__label">描述信息</div>
</div>
<div class="van-cell__value"><span>状态</span></div>
<div class="van-cell__value van-panel__header-value"><span>状态</span></div>
</div>
<div class="van-panel__content">
<div>内容</div>
@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__title"><span>标题</span>
<div class="van-cell__label">描述信息</div>
</div>
<div class="van-cell__value"><span>状态</span></div>
<div class="van-cell__value van-panel__header-value"><span>状态</span></div>
</div>
<div class="van-panel__content">
<div>内容</div>