diff --git a/packages/cell/README.md b/packages/cell/README.md index 15ec79af..19d58889 100644 --- a/packages/cell/README.md +++ b/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 diff --git a/packages/cell/index.less b/packages/cell/index.less index 5e9ece05..737612b5 100644 --- a/packages/cell/index.less +++ b/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 { diff --git a/packages/cell/index.ts b/packages/cell/index.ts index 46a0a92c..c94f5a19 100644 --- a/packages/cell/index.ts +++ b/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}`); } }, diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml index 3fa7be53..17f06624 100644 --- a/packages/cell/index.wxml +++ b/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" />