[Improvement] Cell: add arrow-direction prop (#1323)

* [Improvement] Cell: add arrow-direction prop

* update

packages/cell/demo/index.vue

@@ -23,6 +23,7 @@
       <van-cell-group>
         <van-cell :title="$t('cell')" is-link />
         <van-cell :title="$t('cell')" is-link :value="$t('content')" />
+        <van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
       </van-cell-group>
     </demo-block>
 

packages/cell/en-US.md

@@ -40,6 +40,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell-group>
   <van-cell title="Cell title" is-link />
   <van-cell title="Cell title" is-link value="Content" />
+  <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
 </van-cell-group>
 ```
 
@@ -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
 

packages/cell/index.vue

@@ -28,7 +28,7 @@
       </slot>
     </div>
     <slot name="right-icon">
-      <icon v-if="isLink" :class="b('right-icon')" name="arrow" />
+      <icon v-if="isLink" :class="`${b('right-icon')} ${arrowDirection ? b(`arrow--${arrowDirection}`) : ''}`" name="arrow" />
     </slot>
     <slot name="extra" />
   </div>
@@ -60,7 +60,8 @@ export default create({
     border: {
       type: Boolean,
       default: true
-    }
+    },
+    arrowDirection: String
   },
 
   methods: {

packages/cell/zh-CN.md

@@ -40,12 +40,13 @@ Vue.use(Cell).use(CellGroup);
 
 
 #### 展示箭头
-传入`is-link`属性则会在右侧显示箭头
+传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
 
 ```html
 <van-cell-group>
   <van-cell title="单元格" is-link />
   <van-cell title="单元格" is-link value="内容" />
+  <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
 </van-cell-group>
 ```
 
@@ -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
 

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;