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;