From b4af4022c636d3c024f4aae6230270f88a396ba4 Mon Sep 17 00:00:00 2001 From: Mikasa33 Date: Sun, 21 May 2023 21:53:13 +0800 Subject: [PATCH] feat(Divider): add vertical prop (#11883) * feat(Divider): add vertical prop * feat(Divider): optimized code --- packages/vant/src/divider/Divider.tsx | 7 +++-- packages/vant/src/divider/README.md | 14 ++++++++++ packages/vant/src/divider/README.zh-CN.md | 26 ++++++++++++++----- packages/vant/src/divider/demo/index.vue | 20 ++++++++++++++ packages/vant/src/divider/index.less | 24 +++++++++++++++++ .../test/__snapshots__/demo-ssr.spec.ts.snap | 25 ++++++++++++++++++ .../test/__snapshots__/demo.spec.ts.snap | 24 +++++++++++++++++ 7 files changed, 132 insertions(+), 8 deletions(-) diff --git a/packages/vant/src/divider/Divider.tsx b/packages/vant/src/divider/Divider.tsx index 56fda3257..a28a46ea1 100644 --- a/packages/vant/src/divider/Divider.tsx +++ b/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('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?.()} ); }, diff --git a/packages/vant/src/divider/README.md b/packages/vant/src/divider/README.md index 068f33288..e1cdbdbe9 100644 --- a/packages/vant/src/divider/README.md +++ b/packages/vant/src/divider/README.md @@ -53,6 +53,18 @@ app.use(Divider); ``` +### Vertical + +```html + +Text + +Text + +Text + +``` + ## 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_ | - | diff --git a/packages/vant/src/divider/README.zh-CN.md b/packages/vant/src/divider/README.zh-CN.md index deae78d8c..b35e460ab 100644 --- a/packages/vant/src/divider/README.zh-CN.md +++ b/packages/vant/src/divider/README.zh-CN.md @@ -26,12 +26,12 @@ app.use(Divider); ``` -### 展示文字 +### 展示文本 通过插槽在可以分割线中间插入内容。 ```html -文字 +文本 ``` ### 内容位置 @@ -39,8 +39,8 @@ app.use(Divider); 通过 `content-position` 指定内容所在位置。 ```html -文字 -文字 +文本 +文本 ``` ### 虚线 @@ -48,7 +48,7 @@ app.use(Divider); 添加 `dashed` 属性使分割线渲染为虚线。 ```html -文字 +文本 ``` ### 自定义样式 @@ -59,10 +59,22 @@ app.use(Divider); - 文字 + 文本 ``` +### 垂直 + +```html + +文本 + +文本 + +文本 + +``` + ## 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_ | - | diff --git a/packages/vant/src/divider/demo/index.vue b/packages/vant/src/divider/demo/index.vue index 04cccaec9..669b32adf 100644 --- a/packages/vant/src/divider/demo/index.vue +++ b/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', }, }); @@ -54,6 +56,18 @@ const t = useTranslate({ {{ t('text') }} + + +
+ + {{ t('text') }} + + {{ t('text') }} + + {{ t('text') }} + +
+ diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less index 90ef8872c..d36a1f49a 100644 --- a/packages/vant/src/divider/index.less +++ b/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); + } + } + } } diff --git a/packages/vant/src/divider/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/divider/test/__snapshots__/demo-ssr.spec.ts.snap index 26dc0216d..4c1c5ada4 100644 --- a/packages/vant/src/divider/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/divider/test/__snapshots__/demo-ssr.spec.ts.snap @@ -52,4 +52,29 @@ exports[`should render demo and match snapshot 1`] = ` Text +
+ +
+ + Text + + Text + + Text + +
+
`; diff --git a/packages/vant/src/divider/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/divider/test/__snapshots__/demo.spec.ts.snap index 6435f0fca..8b6ea5049 100644 --- a/packages/vant/src/divider/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/divider/test/__snapshots__/demo.spec.ts.snap @@ -41,4 +41,28 @@ exports[`should render demo and match snapshot 1`] = ` Text +
+
+ + Text + + Text + + Text + +
+
`;