Skip to content

Commit 5f9a4cf

Browse files
chenjiahanchenjiahan
authored
[improvement] Cell: jsx (youzan#2461)
1 parent dd20a17 commit 5f9a4cf

File tree

19 files changed

+200
-315
lines changed

19 files changed

+200
-315
lines changed

‎packages/address-edit/test/__snapshots__/demo.spec.js.snap

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ exports[`renders demo correctly 1`] = `
55
<div>
66
<div class="van-address-edit">
77
<div placeholder="收货人姓名" class="van-cell van-field">
8-
<!---->
98
<div class="van-cell__title"><span>姓名</span>
10-
<!---->
119
</div>
1210
<div class="van-cell__value">
1311
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
@@ -17,12 +15,10 @@ exports[`renders demo correctly 1`] = `
1715
</div>
1816
<!---->
1917
</div>
20-
<!---->
18+
2119
</div>
2220
<div placeholder="收货人手机号" class="van-cell van-field">
23-
<!---->
2421
<div class="van-cell__title"><span>电话</span>
25-
<!---->
2622
</div>
2723
<div class="van-cell__value">
2824
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
@@ -32,12 +28,10 @@ exports[`renders demo correctly 1`] = `
3228
</div>
3329
<!---->
3430
</div>
35-
<!---->
31+
3632
</div>
3733
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
38-
<!---->
3934
<div class="van-cell__title"><span>地区</span>
40-
<!---->
4135
</div>
4236
<div class="van-cell__value">
4337
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
@@ -47,16 +41,13 @@ exports[`renders demo correctly 1`] = `
4741
</div>
4842
<!---->
4943
</div>
50-
<!---->
44+
5145
</div>
5246
<div class="van-cell van-address-edit-detail">
53-
<!---->
54-
<!---->
47+
5548
<div class="van-cell__value van-cell__value--alone">
5649
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
57-
<!---->
5850
<div class="van-cell__title"><span>详细地址</span>
59-
<!---->
6051
</div>
6152
<div class="van-cell__value">
6253
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
@@ -66,15 +57,13 @@ exports[`renders demo correctly 1`] = `
6657
</div>
6758
<!---->
6859
</div>
69-
<!---->
60+
7061
</div>
7162
</div>
72-
<!---->
63+
7364
</div>
7465
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
75-
<!---->
7666
<div class="van-cell__title"><span>邮政编码</span>
77-
<!---->
7867
</div>
7968
<div class="van-cell__value">
8069
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
@@ -84,12 +73,10 @@ exports[`renders demo correctly 1`] = `
8473
</div>
8574
<!---->
8675
</div>
87-
<!---->
76+
8877
</div>
8978
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
90-
<!---->
9179
<div class="van-cell__title"><span>设为默认收货地址</span>
92-
<!---->
9380
</div>
9481
<div class="van-cell__value">
9582
<div title="设为默认收货地址" class="van-switch" style="font-size:24px;background-color:undefined;">
@@ -98,7 +85,7 @@ exports[`renders demo correctly 1`] = `
9885
</div>
9986
</div>
10087
</div>
101-
<!---->
88+
10289
</div>
10390
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button> <button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
10491
<div class="van-popup van-popup--bottom" style="display:none;">

‎packages/address-edit/test/__snapshots__/index.spec.js.snap

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
exports[`create a AddressEdit 1`] = `
44
<div class="van-address-edit">
55
<div placeholder="收货人姓名" class="van-cell van-field">
6-
<!---->
76
<div class="van-cell__title"><span>姓名</span>
8-
<!---->
97
</div>
108
<div class="van-cell__value">
119
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
@@ -15,12 +13,10 @@ exports[`create a AddressEdit 1`] = `
1513
</div>
1614
<!---->
1715
</div>
18-
<!---->
16+
1917
</div>
2018
<div placeholder="收货人手机号" class="van-cell van-field">
21-
<!---->
2219
<div class="van-cell__title"><span>电话</span>
23-
<!---->
2420
</div>
2521
<div class="van-cell__value">
2622
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
@@ -30,12 +26,10 @@ exports[`create a AddressEdit 1`] = `
3026
</div>
3127
<!---->
3228
</div>
33-
<!---->
29+
3430
</div>
3531
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
36-
<!---->
3732
<div class="van-cell__title"><span>地区</span>
38-
<!---->
3933
</div>
4034
<div class="van-cell__value">
4135
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
@@ -45,16 +39,13 @@ exports[`create a AddressEdit 1`] = `
4539
</div>
4640
<!---->
4741
</div>
48-
<!---->
42+
4943
</div>
5044
<div class="van-cell van-address-edit-detail">
51-
<!---->
52-
<!---->
45+
5346
<div class="van-cell__value van-cell__value--alone">
5447
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
55-
<!---->
5648
<div class="van-cell__title"><span>详细地址</span>
57-
<!---->
5849
</div>
5950
<div class="van-cell__value">
6051
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
@@ -64,10 +55,10 @@ exports[`create a AddressEdit 1`] = `
6455
</div>
6556
<!---->
6657
</div>
67-
<!---->
58+
6859
</div>
6960
</div>
70-
<!---->
61+
7162
</div>
7263
<!---->
7364
<!---->
@@ -104,9 +95,7 @@ exports[`create a AddressEdit 1`] = `
10495
exports[`create a AddressEdit with props 1`] = `
10596
<div class="van-address-edit">
10697
<div placeholder="收货人姓名" class="van-cell van-field">
107-
<!---->
10898
<div class="van-cell__title"><span>姓名</span>
109-
<!---->
11099
</div>
111100
<div class="van-cell__value">
112101
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
@@ -116,12 +105,10 @@ exports[`create a AddressEdit with props 1`] = `
116105
</div>
117106
<!---->
118107
</div>
119-
<!---->
108+
120109
</div>
121110
<div placeholder="收货人手机号" class="van-cell van-field">
122-
<!---->
123111
<div class="van-cell__title"><span>电话</span>
124-
<!---->
125112
</div>
126113
<div class="van-cell__value">
127114
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
@@ -131,12 +118,10 @@ exports[`create a AddressEdit with props 1`] = `
131118
</div>
132119
<!---->
133120
</div>
134-
<!---->
121+
135122
</div>
136123
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
137-
<!---->
138124
<div class="van-cell__title"><span>地区</span>
139-
<!---->
140125
</div>
141126
<div class="van-cell__value">
142127
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
@@ -146,16 +131,13 @@ exports[`create a AddressEdit with props 1`] = `
146131
</div>
147132
<!---->
148133
</div>
149-
<!---->
134+
150135
</div>
151136
<div class="van-cell van-address-edit-detail">
152-
<!---->
153-
<!---->
137+
154138
<div class="van-cell__value van-cell__value--alone">
155139
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
156-
<!---->
157140
<div class="van-cell__title"><span>详细地址</span>
158-
<!---->
159141
</div>
160142
<div class="van-cell__value">
161143
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
@@ -165,15 +147,13 @@ exports[`create a AddressEdit with props 1`] = `
165147
</div>
166148
<!---->
167149
</div>
168-
<!---->
150+
169151
</div>
170152
</div>
171-
<!---->
153+
172154
</div>
173155
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
174-
<!---->
175156
<div class="van-cell__title"><span>邮政编码</span>
176-
<!---->
177157
</div>
178158
<div class="van-cell__value">
179159
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
@@ -183,12 +163,10 @@ exports[`create a AddressEdit with props 1`] = `
183163
</div>
184164
<!---->
185165
</div>
186-
<!---->
166+
187167
</div>
188168
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
189-
<!---->
190169
<div class="van-cell__title"><span>设为默认收货地址</span>
191-
<!---->
192170
</div>
193171
<div class="van-cell__value">
194172
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
@@ -197,7 +175,7 @@ exports[`create a AddressEdit with props 1`] = `
197175
</div>
198176
</div>
199177
</div>
200-
<!---->
178+
201179
</div>
202180
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
203181
<!---->

‎packages/address-list/test/__snapshots__/demo.spec.js.snap

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ exports[`renders demo correctly 1`] = `
77
<div class="van-radio-group">
88
<div class="van-cell-group van-hairline--top-bottom">
99
<div class="van-cell van-cell--clickable van-address-item">
10-
<!---->
11-
<!---->
10+
1211
<div class="van-cell__value van-cell__value--alone">
1312
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
14-
</div> <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
13+
</div>
14+
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
1515
<!---->
1616
<!----></i>
1717
</div>
1818
<div class="van-cell van-cell--clickable van-address-item">
19-
<!---->
20-
<!---->
19+
2120
<div class="van-cell__value van-cell__value--alone">
2221
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
23-
</div> <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
22+
</div>
23+
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
2424
<!---->
2525
<!----></i>
2626
</div>
@@ -29,11 +29,11 @@ exports[`renders demo correctly 1`] = `
2929
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
3030
<div class="van-cell-group van-hairline--top-bottom">
3131
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
32-
<!---->
33-
<!---->
32+
3433
<div class="van-cell__value van-cell__value--alone">
3534
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
36-
</div> <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
35+
</div>
36+
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
3737
<!---->
3838
<!----></i>
3939
</div>

‎packages/cell/index.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { use, isDef } from '../utils';
2+
import Icon from '../icon';
3+
import CellMixin from '../mixins/cell';
4+
import RouterLink from '../mixins/router-link';
5+
6+
const [sfc, bem] = use('cell');
7+
8+
export default sfc({
9+
mixins: [CellMixin, RouterLink],
10+
11+
props: {
12+
size: String,
13+
clickable: Boolean,
14+
arrowDirection: String
15+
},
16+
17+
computed: {
18+
arrowIcon() {
19+
return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
20+
}
21+
},
22+
23+
methods: {
24+
onClick() {
25+
this.$emit('click');
26+
this.routerLink();
27+
}
28+
},
29+
30+
render(h) {
31+
const slots = this.$slots;
32+
const showTitle = slots.title || isDef(this.title);
33+
const showValue = slots.default || isDef(this.value);
34+
35+
const Title = showTitle && (
36+
<div class={[bem('title'), this.titleClass]}>
37+
{slots.title || <span>{this.title}</span>}
38+
{this.label && <div class={[bem('label'), this.labelClass]}>{this.label}</div>}
39+
</div>
40+
);
41+
42+
const Value = showValue && (
43+
<div class={[bem('value', { alone: !slots.title && !this.title }), this.valueClass]}>
44+
{slots.default || <span>{this.value}</span>}
45+
</div>
46+
);
47+
48+
const LeftIcon = slots.icon || (
49+
this.icon && <Icon class={bem('left-icon')} name={this.icon} />
50+
);
51+
52+
const RightIcon = slots['right-icon'] || (
53+
this.isLink && <Icon class={bem('right-icon')} name={this.arrowIcon} />
54+
);
55+
56+
return (
57+
<div
58+
class={bem({
59+
center: this.center,
60+
required: this.required,
61+
borderless: !this.border,
62+
clickable: this.isLink || this.clickable,
63+
[this.size]: this.size
64+
})}
65+
onClick={this.onClick}
66+
>
67+
{LeftIcon}
68+
{Title}
69+
{Value}
70+
{RightIcon}
71+
{slots.extra}
72+
</div>
73+
);
74+
}
75+
});

0 commit comments

Comments
 (0)