diff --git a/packages/cell/en-US.md b/packages/cell/en-US.md
index 0ec29cbf6..075faa4b1 100644
--- a/packages/cell/en-US.md
+++ b/packages/cell/en-US.md
@@ -132,4 +132,5 @@ Vue.use(Cell).use(CellGroup);
| - | Default slot |
| icon | Custom icon |
| title | Custom title |
+| label | Custom label |
| right-icon | Custom right icon |
diff --git a/packages/cell/index.tsx b/packages/cell/index.tsx
index 3afcb417f..9654f11ac 100644
--- a/packages/cell/index.tsx
+++ b/packages/cell/index.tsx
@@ -18,6 +18,7 @@ export type CellProps = RouteProps &
export type CellSlots = DefaultSlots & {
icon?: ScopedSlot;
title?: ScopedSlot;
+ label?: ScopedSlot;
extra?: ScopedSlot;
'right-icon'?: ScopedSlot;
};
@@ -38,11 +39,18 @@ function Cell(
const showTitle = slots.title || isDef(title);
const showValue = slots.default || isDef(value);
+ const showLabel = slots.label || isDef(label);
+
+ const Label = showLabel && (
+
+ {slots.label ? slots.label() : label}
+
+ );
const Title = showTitle && (
{slots.title ? slots.title() :
{title}}
- {label &&
{label}
}
+ {Label}
);
diff --git a/packages/cell/test/__snapshots__/index.spec.js.snap b/packages/cell/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..52bdf7fe1
--- /dev/null
+++ b/packages/cell/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`arrow direction 1`] = `
+
+
+`;
+
+exports[`render slot 1`] = `
+
+
Custom Title
Custom Label
+
Custom Extra
+
+`;
diff --git a/packages/cell/test/index.spec.js b/packages/cell/test/index.spec.js
index 94f1ca5a4..6ba3f7c10 100644
--- a/packages/cell/test/index.spec.js
+++ b/packages/cell/test/index.spec.js
@@ -14,3 +14,31 @@ test('click event', () => {
wrapper.trigger('click');
expect(click.mock.calls.length).toBeTruthy();
});
+
+test('arrow direction', () => {
+ const wrapper = mount(Cell, {
+ propsData: {
+ isLink: true,
+ arrowDirection: 'down'
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render slot', () => {
+ const wrapper = mount({
+ template: `
+
+ Custom Title
+ Custom Label
+ Custom Extra
+ |
+ `,
+ components: {
+ Cell
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md
index 792c2d1e0..fac275530 100644
--- a/packages/cell/zh-CN.md
+++ b/packages/cell/zh-CN.md
@@ -134,6 +134,7 @@ Vue.use(Cell).use(CellGroup);
| 名称 | 说明 |
|------|------|
| - | 自定义`value`显示内容 |
-| title | 自定义`title`显示内容 |
-| icon | 自定义`icon` |
-| right-icon | 自定义右侧按钮,默认是`arrow` |
+| title | 自定义标题显示内容 |
+| label | 自定义标题下方描述显示内容 |
+| icon | 自定义左侧图标 |
+| right-icon | 自定义右侧按钮,默认为`arrow` |