feat(Divider): add vertical prop (#11883)

* feat(Divider): add vertical prop

* feat(Divider): optimized code

packages/vant/src/divider/Divider.tsx

@@ -8,6 +8,7 @@ export type DividerContentPosition = 'left' | 'center' | 'right';
 export const dividerProps = {
   dashed: Boolean,
   hairline: truthProp,
+  vertical: Boolean,
   contentPosition: makeStringProp<DividerContentPosition>('center'),
 };
 
@@ -25,10 +26,12 @@ export default defineComponent({
         class={bem({
           dashed: props.dashed,
           hairline: props.hairline,
-          [`content-${props.contentPosition}`]: !!slots.default,
+          vertical: props.vertical,
+          [`content-${props.contentPosition}`]:
+            !!slots.default && !props.vertical,
         })}
       >
-        {slots.default?.()}
+        {!props.vertical && slots.default?.()}
       </div>
     );
   },

packages/vant/src/divider/README.md

@@ -53,6 +53,18 @@ app.use(Divider);
 </van-divider>
 ```
 
+### Vertical
+
+```html
+<van-divider vertical />
+Text
+<van-divider vertical dashed />
+Text
+<van-divider vertical :hairline="false" />
+Text
+<van-divider vertical :style="{ borderColor: '#1989fa' }" />
+```
+
 ## API
 
 ### Props
@@ -62,6 +74,7 @@ app.use(Divider);
 | dashed | Whether to use dashed border | _boolean_ | `false` |
 | hairline | Whether to use hairline | _boolean_ | `true` |
 | content-position | Content position, can be set to `left` `right` | _string_ | `center` |
+| vertical | Whether to use vertical | _boolean_ | `false` |
 
 ### Slots
 
@@ -86,6 +99,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name                              | Default Value             | Description |
 | --------------------------------- | ------------------------- | ----------- |
 | --van-divider-margin              | _var(--van-padding-md) 0_ | -           |
+| --van-divider-vertical-margin     | _0 var(--van-padding-xs)_ | -           |
 | --van-divider-text-color          | _var(--van-text-color-2)_ | -           |
 | --van-divider-font-size           | _var(--van-font-size-md)_ | -           |
 | --van-divider-line-height         | _24px_                    | -           |

packages/vant/src/divider/README.zh-CN.md

@@ -26,12 +26,12 @@ app.use(Divider);
 <van-divider />
 ```
 
-### 展示文字
+### 展示文本
 
 通过插槽在可以分割线中间插入内容。
 
 ```html
-<van-divider>文字</van-divider>
+<van-divider>文本</van-divider>
 ```
 
 ### 内容位置
@@ -39,8 +39,8 @@ app.use(Divider);
 通过 `content-position` 指定内容所在位置。
 
 ```html
-<van-divider content-position="left">文字</van-divider>
+<van-divider content-position="left">文本</van-divider>
-<van-divider content-position="right">文字</van-divider>
+<van-divider content-position="right">文本</van-divider>
 ```
 
 ### 虚线
@@ -48,7 +48,7 @@ app.use(Divider);
 添加 `dashed` 属性使分割线渲染为虚线。
 
 ```html
-<van-divider dashed>文字</van-divider>
+<van-divider dashed>文本</van-divider>
 ```
 
 ### 自定义样式
@@ -59,10 +59,22 @@ app.use(Divider);
 <van-divider
   :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
 >
-  文字
+  文本
 </van-divider>
 ```
 
+### 垂直
+
+```html
+<van-divider vertical />
+文本
+<van-divider vertical dashed />
+文本
+<van-divider vertical :hairline="false" />
+文本
+<van-divider vertical :style="{ borderColor: '#1989fa' }" />
+```
+
 ## API
 
 ### Props
@@ -72,6 +84,7 @@ app.use(Divider);
 | dashed           | 是否使用虚线                      | _boolean_ | `false`  |
 | hairline         | 是否使用 0.5px 线                 | _boolean_ | `true`   |
 | content-position | 内容位置，可选值为 `left` `right` | _string_  | `center` |
+| vertical         | 是否使用垂直                      | _boolean_ | `false`  |
 
 ### Slots
 
@@ -96,6 +109,7 @@ import type { DividerProps, DividerContentPosition } from 'vant';
 | 名称                              | 默认值                    | 描述 |
 | --------------------------------- | ------------------------- | ---- |
 | --van-divider-margin              | _var(--van-padding-md) 0_ | -    |
+| --van-divider-vertical-margin     | _0 var(--van-padding-xs)_ | -    |
 | --van-divider-text-color          | _var(--van-text-color-2)_ | -    |
 | --van-divider-font-size           | _var(--van-font-size-md)_ | -    |
 | --van-divider-line-height         | _24px_                    | -    |

packages/vant/src/divider/demo/index.vue

@@ -9,6 +9,7 @@ const t = useTranslate({
     withText: '展示文本',
     contentPosition: '内容位置',
     customStyle: '自定义样式',
+    vertical: '垂直',
   },
   'en-US': {
     text: 'Text',
@@ -16,6 +17,7 @@ const t = useTranslate({
     withText: 'With Text',
     contentPosition: 'Content Position',
     customStyle: 'Custom Style',
+    vertical: 'Vertical',
   },
 });
 </script>
@@ -54,6 +56,18 @@ const t = useTranslate({
       {{ t('text') }}
     </van-divider>
   </demo-block>
+
+  <demo-block :title="t('vertical')">
+    <div class="content">
+      <van-divider vertical />
+      {{ t('text') }}
+      <van-divider vertical dashed />
+      {{ t('text') }}
+      <van-divider vertical :hairline="false" />
+      {{ t('text') }}
+      <van-divider vertical :style="{ borderColor: '#1989fa' }" />
+    </div>
+  </demo-block>
 </template>
 
 <style lang="less">
@@ -63,5 +77,11 @@ const t = useTranslate({
   .van-doc-demo-block__title {
     padding-top: var(--van-padding-md);
   }
+
+  .content {
+    padding: 0 var(--van-padding-md);
+    color: var(--van-text-color-2);
+    font-size: var(--van-font-size-md);
+  }
 }
 </style>

packages/vant/src/divider/index.less

@@ -1,5 +1,6 @@
 :root {
   --van-divider-margin: var(--van-padding-md) 0;
+  --van-divider-vertical-margin: 0 var(--van-padding-xs);
   --van-divider-text-color: var(--van-text-color-2);
   --van-divider-font-size: var(--van-font-size-md);
   --van-divider-line-height: 24px;
@@ -70,4 +71,27 @@
       max-width: var(--van-divider-content-right-width);
     }
   }
+
+  &--vertical {
+    display: inline-block;
+    width: var(--van-border-width);
+    height: 1em;
+    margin: var(--van-divider-vertical-margin);
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 var(--van-border-width);
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &.van-divider--hairline {
+      &::before {
+        transform: scaleX(0.5);
+      }
+    }
+  }
 }

packages/vant/src/divider/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -52,4 +52,29 @@ exports[`should render demo and match snapshot 1`] = `
     Text
   </div>
 </div>
+<div>
+  <!--[-->
+  <div class="content">
+    <div role="separator"
+         class="van-divider van-divider--hairline van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--dashed van-divider--hairline van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--hairline van-divider--vertical"
+         style="border-color:#1989fa;"
+    >
+    </div>
+  </div>
+</div>
 `;

packages/vant/src/divider/test/__snapshots__/demo.spec.ts.snap

@@ -41,4 +41,28 @@ exports[`should render demo and match snapshot 1`] = `
     Text
   </div>
 </div>
+<div>
+  <div class="content">
+    <div role="separator"
+         class="van-divider van-divider--hairline van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--dashed van-divider--hairline van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--vertical"
+    >
+    </div>
+    Text
+    <div role="separator"
+         class="van-divider van-divider--hairline van-divider--vertical"
+         style="border-color: #1989fa;"
+    >
+    </div>
+  </div>
+</div>
 `;