diff --git a/packages/cell/demo/index.vue b/packages/cell/demo/index.vue
index d06252b0b..6a5892fa6 100644
--- a/packages/cell/demo/index.vue
+++ b/packages/cell/demo/index.vue
@@ -23,6 +23,7 @@
+
diff --git a/packages/cell/en-US.md b/packages/cell/en-US.md
index 22aa6e038..664fe11ec 100644
--- a/packages/cell/en-US.md
+++ b/packages/cell/en-US.md
@@ -40,6 +40,7 @@ Vue.use(Cell).use(CellGroup);
+
```
@@ -82,6 +83,7 @@ Vue.use(Cell).use(CellGroup);
| clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
| is-link | Whether to show link icon | `Boolean` | `false` |
| required | Whether to show required mark | `Boolean` | `false` |
+| arrow-direction | Can be set to `left` `up` `down` | `String` | - |
### Cell Event
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index ed6df3275..c8ba7e027 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -28,7 +28,7 @@
-
+
@@ -60,7 +60,8 @@ export default create({
border: {
type: Boolean,
default: true
- }
+ },
+ arrowDirection: String
},
methods: {
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md
index c41cb8deb..9215d6c24 100644
--- a/packages/cell/zh-CN.md
+++ b/packages/cell/zh-CN.md
@@ -40,12 +40,13 @@ Vue.use(Cell).use(CellGroup);
#### 展示箭头
-传入`is-link`属性则会在右侧显示箭头
+传入`is-link`属性则会在右侧显示箭头,并且可以通过传入`arrow-direction`属性控制箭头方向
```html
+
```
@@ -89,6 +90,7 @@ Vue.use(Cell).use(CellGroup);
| clickable | 是否开启点击反馈 | `Boolean` | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
| required | 是否显示表单必填星号 | `Boolean` | `false` |
+| arrow-direction | 箭头方向,可选值为 `left` `up` `down` | `String` | - |
### Cell Event
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index 3e7da0e8a..7bff53c51 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -58,6 +58,20 @@
margin-left: 5px;
}
+ &__arrow {
+ &--left::before {
+ transform: rotate(180deg);
+ }
+
+ &--up::before {
+ transform: rotate(-90deg);
+ }
+
+ &--down::before {
+ transform: rotate(90deg);
+ }
+ }
+
&--clickable {
&:active {
background-color: $active-color;