Skip to content

Commit c2a15ab

Browse files
anlyyaoanlyyao
authored
feat(SwipeCell): support icon (#1201)
1 parent cd7136b commit c2a15ab

File tree

23 files changed

+417
-100
lines changed

23 files changed

+417
-100
lines changed

‎src/swipe-cell/README.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ custom-style | String | - | \- | N
1010
disabled | Boolean | - | \- | N
1111
opened | Boolean / Array | false | \- | N
1212
left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
13-
right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
13+
right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
1414

1515
### SwipeCell Events
1616

‎src/swipe-cell/README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,24 @@ isComponent: true
1616
}
1717
```
1818

19-
## 代码演示
19+
### 组件类型
2020

21-
<img src="https://tdesign.gtimg.com/miniprogram/readme/swipeout-1.png" width="375px" height="50%">
22-
23-
### 往左滑动
21+
左滑单操作
2422

2523
{{ left }}
2624

27-
### 往右滑动
25+
右滑单操作
2826

2927
{{ right }}
3028

29+
左右滑操作
30+
31+
{{ double }}
32+
33+
带图标的滑动操作
34+
35+
{{ icon }}
36+
3137
## API
3238
### SwipeCell Props
3339

@@ -37,7 +43,7 @@ custom-style | String | - | 自定义组件样式 | N
3743
disabled | Boolean | - | 是否禁用滑动 | N
3844
opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array<boolean>` | N |
3945
left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
40-
right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
46+
right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
4147

4248
### SwipeCell Events
4349

‎src/swipe-cell/__test__/__snapshots__/demo.test.js.snap‎

Lines changed: 155 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,54 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`SwipeCell SwipeCell left demo works fine 1`] = `
4-
<left>
3+
exports[`SwipeCell SwipeCell double demo works fine 1`] = `
4+
<double>
55
<t-swipe-cell
6-
tClass="test-class-123"
6+
left="{{
7+
Array [
8+
Object {
9+
"className": "btn favor-btn",
10+
"text": "选择",
11+
},
12+
]
13+
}}"
14+
right="{{
15+
Array [
16+
Object {
17+
"className": "btn delete-btn",
18+
"text": "删除",
19+
},
20+
]
21+
}}"
22+
bind:click="onActionClick"
723
>
824
<t-cell
925
bordered="{{false}}"
1026
note="辅助信息"
11-
title="列表-左滑单操作"
27+
title="左右滑操作"
1228
/>
13-
<wx-view
14-
class="t-swipe-cell-demo-btn delete-btn"
15-
slot="right"
16-
bind:tap="onDelete"
17-
>
18-
删除
19-
</wx-view>
2029
</t-swipe-cell>
30+
</double>
31+
`;
32+
33+
exports[`SwipeCell SwipeCell icon demo works fine 1`] = `
34+
<wx-icon>
2135
<t-swipe-cell
2236
right="{{
2337
Array [
2438
Object {
25-
"className": "t-swipe-cell-demo-btn edit-btn",
39+
"className": "btn edit-btn",
40+
"icon": Object {
41+
"name": "edit",
42+
"size": 16,
43+
},
2644
"text": "编辑",
2745
},
2846
Object {
29-
"className": "t-swipe-cell-demo-btn delete-btn",
47+
"className": "btn delete-btn",
48+
"icon": Object {
49+
"name": "delete",
50+
"size": 16,
51+
},
3052
"text": "删除",
3153
},
3254
]
@@ -35,56 +57,156 @@ exports[`SwipeCell SwipeCell left demo works fine 1`] = `
3557
>
3658
<t-cell
3759
bordered="{{false}}"
38-
note="双操作"
39-
title="列表-左滑双操作"
60+
note="辅助信息"
61+
title="左滑-带图标文本双操作"
62+
/>
63+
</t-swipe-cell>
64+
<t-swipe-cell
65+
right="{{
66+
Array [
67+
Object {
68+
"className": "btn edit-btn",
69+
"icon": "edit",
70+
},
71+
Object {
72+
"className": "btn delete-btn",
73+
"icon": "delete",
74+
},
75+
]
76+
}}"
77+
>
78+
<t-cell
79+
bordered="{{false}}"
80+
note="辅助信息"
81+
title="左滑-仅带图标双操作"
4082
/>
4183
</t-swipe-cell>
4284
<t-swipe-cell>
4385
<t-cell
4486
bordered="{{false}}"
45-
note="多操作"
46-
title="列表-左滑多操作"
87+
description="一段很长很长的内容文字"
88+
image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
89+
note="辅助信息"
90+
title="左滑大列表-仅带图标双操作"
4791
/>
4892
<wx-view
49-
class="t-swipe-cell-demo-btn-wrapper"
93+
class="btn-wrapper"
5094
slot="right"
5195
>
5296
<wx-view
53-
class="t-swipe-cell-demo-btn favor-btn"
54-
bind:tap="onFavor"
55-
>
56-
收藏
57-
</wx-view>
58-
<wx-view
59-
class="t-swipe-cell-demo-btn edit-btn"
97+
class="btn edit-btn column"
6098
bind:tap="onEdit"
6199
>
62-
编辑
100+
<t-icon
101+
class="padding-bottom"
102+
name="edit"
103+
size="32rpx"
104+
/>
105+
106+
编辑
107+
63108
</wx-view>
64109
<wx-view
65-
class="t-swipe-cell-demo-btn delete-btn"
110+
class="btn delete-btn column"
66111
bind:tap="onDelete"
67112
>
68-
删除
113+
<t-icon
114+
class="padding-bottom"
115+
name="delete"
116+
size="32rpx"
117+
/>
118+
119+
删除
120+
69121
</wx-view>
70122
</wx-view>
71123
</t-swipe-cell>
124+
</wx-icon>
125+
`;
126+
127+
exports[`SwipeCell SwipeCell left demo works fine 1`] = `
128+
<left>
72129
<t-swipe-cell>
73130
<t-cell
74131
bordered="{{false}}"
75-
description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字"
132+
note="辅助信息"
133+
title="左滑单操作"
134+
/>
135+
<wx-view
136+
class="btn delete-btn"
137+
slot="right"
138+
bind:tap="onDelete"
139+
>
140+
删除
141+
</wx-view>
142+
</t-swipe-cell>
143+
<t-swipe-cell>
144+
<t-cell
145+
bordered="{{false}}"
146+
description="一段很长很长的内容文字"
76147
image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
77-
tClassImage="title-image-large"
148+
note="辅助信息"
78149
title="左滑大列表"
79150
/>
80151
<wx-view
81-
class="t-swipe-cell-demo-btn delete-btn"
152+
class="btn delete-btn"
82153
slot="right"
83154
bind:tap="onDelete"
84155
>
85156
删除
86157
</wx-view>
87158
</t-swipe-cell>
159+
<t-swipe-cell
160+
right="{{
161+
Array [
162+
Object {
163+
"className": "btn edit-btn",
164+
"text": "编辑",
165+
},
166+
Object {
167+
"className": "btn delete-btn",
168+
"text": "删除",
169+
},
170+
]
171+
}}"
172+
bind:click="onActionClick"
173+
>
174+
<t-cell
175+
bordered="{{false}}"
176+
note="辅助信息"
177+
title="左滑双操作"
178+
/>
179+
</t-swipe-cell>
180+
<t-swipe-cell>
181+
<t-cell
182+
bordered="{{false}}"
183+
note="辅助信息"
184+
title="左滑多操作"
185+
/>
186+
<wx-view
187+
class="btn-wrapper"
188+
slot="right"
189+
>
190+
<wx-view
191+
class="btn favor-btn"
192+
bind:tap="onFavor"
193+
>
194+
收藏
195+
</wx-view>
196+
<wx-view
197+
class="btn edit-btn"
198+
bind:tap="onEdit"
199+
>
200+
编辑
201+
</wx-view>
202+
<wx-view
203+
class="btn delete-btn"
204+
bind:tap="onDelete"
205+
>
206+
删除
207+
</wx-view>
208+
</wx-view>
209+
</t-swipe-cell>
88210
</left>
89211
`;
90212

@@ -94,10 +216,10 @@ exports[`SwipeCell SwipeCell right demo works fine 1`] = `
94216
<t-cell
95217
bordered="{{false}}"
96218
note="辅助信息"
97-
title="列表-右滑单操作"
219+
title="右滑单操作"
98220
/>
99221
<wx-view
100-
class="t-swipe-cell-demo-btn favor-btn"
222+
class="btn favor-btn"
101223
slot="left"
102224
bind:tap="onChoice"
103225
>

‎src/swipe-cell/__test__/demo.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import simulate from 'miniprogram-simulate';
66
import path from 'path';
77

8-
const mapper = ['left', 'right'];
8+
const mapper = ['double', 'icon', 'left', 'right'];
99

1010
describe('SwipeCell', () => {
1111
mapper.forEach((demoName) => {

‎src/swipe-cell/_example/double/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Component({
2+
data: {
3+
right: [
4+
{
5+
text: '删除',
6+
className: 'btn delete-btn',
7+
},
8+
],
9+
left: [
10+
{
11+
text: '选择',
12+
className: 'btn favor-btn',
13+
},
14+
],
15+
},
16+
17+
methods: {
18+
onActionClick({ detail }) {
19+
wx.showToast({ title: `你点击了${detail.text}`, icon: 'none' });
20+
},
21+
},
22+
});

‎src/swipe-cell/_example/double/index.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
"t-cell": "tdesign-miniprogram/cell/cell",
5+
"t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
6+
}
7+
}

‎src/swipe-cell/_example/double/index.wxml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<t-swipe-cell right="{{right}}" left="{{left}}" bind:click="onActionClick">
2+
<t-cell title="左右滑操作" note="辅助信息" bordered="{{false}}" />
3+
</t-swipe-cell>

‎src/swipe-cell/_example/double/index.wxss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.btn {
2+
display: inline-flex;
3+
justify-content: center;
4+
align-items: center;
5+
width: 120rpx;
6+
height: 100%;
7+
color: white;
8+
}
9+
10+
.favor-btn {
11+
background-color: #0052d9;
12+
}
13+
14+
.delete-btn {
15+
background-color: #e34d59;
16+
}

0 commit comments

Comments
 (0)