[new feature] Cell: 增加 arrow-direction 属性 (#866)

packages/cell/README.md

@@ -106,6 +106,7 @@
 | clickable | 是否开启点击反馈 | `Boolean` | `false` |
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
 | required | 是否显示表单必填星号 | `Boolean` | `false` |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - |
 
 ### Cell Event
 

packages/cell/index.less

@@ -46,16 +46,35 @@
   }
 
   &__left-icon-wrap,
-  &__right-icon-wrap  {
+  &__right-icon-wrap {
     display: flex;
     align-items: center;
     height: 24px;
   }
 
+  &__left-icon-wrap {
+    margin-right: 5px;
+  }
+
+  &__right-icon-wrap {
+    margin-left: 5px;
+
+    &--left {
+      transform: rotate(180deg);
+    }
+
+    &--up {
+      transform: rotate(-90deg);
+    }
+
+    &--down {
+      transform: rotate(90deg);
+    }
+  }
+
   &__left-icon {
     font-size: 16px !important;
     line-height: 24px;
-    margin-right: 5px;
     vertical-align: middle;
   }
 
@@ -63,7 +82,6 @@
     color: @gray-dark;
     font-size: 12px !important;
     line-height: 24px;
-    margin-left: 5px;
   }
 
   &--clickable {

packages/cell/index.ts

@@ -24,7 +24,8 @@ VantComponent({
     border: {
       type: Boolean,
       value: true
-    }
+    },
+    arrowDirection: String
   },
 
   computed: {
@@ -41,6 +42,11 @@ VantComponent({
     titleStyle(): string {
       const { titleWidth } = this.data;
       return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
+    },
+
+    iconWrapClass(): string {
+      const prefix = 'van-cell__right-icon-wrap';
+      return this.classNames(prefix, `${prefix}--${this.data.arrowDirection}`);
     }
   },
 

packages/cell/index.wxml

@@ -30,7 +30,7 @@
   <van-icon
     wx:if="{{ isLink }}"
     name="arrow"
-    class="van-cell__right-icon-wrap"
+    class="{{ iconWrapClass }}"
     custom-class="van-cell__right-icon"
   />
   <slot wx:else name="right-icon" />