Skip to content

Commit 1b9d7e6

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ 优化 Divider 分割线功能支持虚线、垂直等功能 (#737)
1 parent abc8488 commit 1b9d7e6

6 files changed

Lines changed: 265 additions & 42 deletions

File tree

‎docs/component/divider.md‎

Lines changed: 79 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,53 @@
11
<frame/>
22

3-
# Divider 分割线
3+
# Divider 分割线
44

5+
:::danger 请注意
6+
`hairline`、`dashed`、`content-position`、`vertical`属性为 $LOWEST_VERSION$ 版本新增支持，在此之前仅支持默认插槽显示文本和自定义`color`。
7+
:::
58

69
## 基本使用
710

8-
使用默认插槽设置内容。
11+
默认渲染一条水平分割线。
912

1013
```html
11-
<wd-divider>这是分割线</wd-divider>
14+
<wd-divider></wd-divider>
15+
```
16+
17+
## 展示文本
18+
19+
使用默认插槽在分割线中间插入内容。
20+
21+
```html
22+
<wd-divider>展示文本</wd-divider>
23+
```
24+
25+
## 自定义渲染内容
26+
27+
使用默认插槽在分割线中间插入自定义内容。
28+
29+
```html
30+
<wd-divider>
31+
<wd-icon name="arrow-down" size="20" color="#1989fa" />
32+
</wd-divider>
33+
```
34+
35+
## 内容位置
36+
37+
通过 `content-position` 指定内容所在位置。
38+
39+
```html
40+
<wd-divider>中间</wd-divider>
41+
<wd-divider content-position="left">左侧</wd-divider>
42+
<wd-divider content-position="right">右侧</wd-divider>
43+
```
44+
45+
## 虚线
46+
47+
添加 `dashed` 属性使分割线渲染为虚线。
48+
49+
```html
50+
<wd-divider dashed>虚线分割</wd-divider>
1251
```
1352

1453
## 自定义颜色
@@ -19,20 +58,48 @@
1958
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
2059
```
2160

61+
## 垂直分割线
62+
63+
添加 `vertical` 属性使分割线渲染为垂直分割线。
64+
65+
```html
66+
<view class="content">
67+
文本
68+
<wd-divider vertical />
69+
文本
70+
<wd-divider vertical dashed />
71+
文本
72+
<wd-divider vertical :hairline="false" />
73+
文本
74+
<wd-divider vertical color="#1989fa" />
75+
文本
76+
</view>
77+
```
78+
79+
```css
80+
.content {
81+
padding: 12rpx 15px;
82+
}
83+
```
84+
2285
## Attributes
2386

24-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
25-
|-----|------|-----|-------|-------|--------|
26-
| color | 自定义颜色，所有颜色的写法 | string | - | - | - |
87+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
88+
| ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- |
89+
| color | 自定义颜色，支持所有颜色的写法 | string | - | - | - |
90+
| hairline | 是否显示边框 | boolean | - | true | $LOWEST_VERSION$ |
91+
| dashed | 是否显示为虚线 | boolean | - | false | $LOWEST_VERSION$ |
92+
| content-position | 内容位置 | string | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ |
93+
| vertical | 是否显示为垂直分割线 | boolean | - | false | $LOWEST_VERSION$ |
2794

2895
## Slot
2996

30-
| name | 说明 | 最低版本 |
31-
|------|-----|---------|
32-
| default | 内容 | - |
97+
| name | 说明 | 最低版本 |
98+
| ------- | ---- | -------- |
99+
| default | 内容，仅在 `vertical` 为 `false` 时生效 | - |
33100

34101
## 外部样式类
35102

36-
| 类名 | 说明 | 最低版本 |
37-
|-----|-----|---------|
38-
| custom-class | 根节点样式 | - |
103+
| 类名 | 说明 | 最低版本 |
104+
| ------------ | ---------- | -------- |
105+
| custom-class | 根节点样式 | - |

‎src/pages/divider/Index.vue‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,51 @@
1-
<!--
2-
* @Author: weisheng
3-
* @Date: 2023-06-13 11:47:12
4-
* @LastEditTime: 2023-08-07 20:19:49
5-
* @LastEditors: weisheng
6-
* @Description:
7-
* @FilePath: \wot-design-uni\src\pages\divider\Index.vue
8-
* 记得注释
9-
-->
101
<template>
112
<page-wraper>
123
<demo-block title="基本用法" transparent>
13-
<wd-divider>这是分割线</wd-divider>
4+
<wd-divider></wd-divider>
145
</demo-block>
6+
7+
<demo-block title="展示文本" transparent>
8+
<wd-divider>展示文本</wd-divider>
9+
</demo-block>
10+
11+
<demo-block title="自定义渲染内容" transparent>
12+
<wd-divider>
13+
<wd-icon name="arrow-down" size="20" />
14+
</wd-divider>
15+
</demo-block>
16+
17+
<demo-block title="内容位置" transparent>
18+
<wd-divider>中间</wd-divider>
19+
<wd-divider content-position="left">左侧</wd-divider>
20+
<wd-divider content-position="right">右侧</wd-divider>
21+
</demo-block>
22+
23+
<demo-block title="虚线" transparent>
24+
<wd-divider dashed>虚线分割</wd-divider>
25+
</demo-block>
26+
1527
<demo-block title="自定义颜色" transparent>
1628
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
1729
</demo-block>
30+
31+
<demo-block title="垂直分割线" transparent>
32+
<view class="content">
33+
文本
34+
<wd-divider vertical />
35+
文本
36+
<wd-divider vertical dashed />
37+
文本
38+
<wd-divider vertical :hairline="false" />
39+
文本
40+
<wd-divider vertical color="#1989fa" />
41+
文本
42+
</view>
43+
</demo-block>
1844
</page-wraper>
1945
</template>
2046
<script lang="ts" setup></script>
21-
<style lang="scss" scoped></style>
47+
<style lang="scss" scoped>
48+
.content {
49+
padding: 12rpx 15px;
50+
}
51+
</style>

‎src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,9 +268,21 @@ $-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; /
268268

269269
/* divider */
270270
$-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距
271+
$-divider-margin: var(--wot-divider-margin, 16px 0) !default; // 上下间距
271272
$-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
272-
$-divider-line-color: var(--wot-divider-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色
273+
$-divider-line-color: var(--wot-divider-line-color, currentColor) !default; // 线条颜色
274+
$-divider-line-height: var(--wot-divider-line-height, 1px) !default; // 线条高度
273275
$-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小
276+
$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default; // 左侧内容宽度
277+
$-divider-content-left-margin: var(--wot-divider-content-left-margin, 12px) !default; // 左侧内容距离线距离
278+
$-divider-content-right-margin: var(--wot-divider-content-right-margin, 12px) !default; // 右侧内容距离线距离
279+
$-divider-content-right-width: var(--wot-divider-content-right-width, 10%) !default; // 右侧内容宽度
280+
$-divider-vertical-height: var(--wot-divider-vertical-height, 16px) !default; // 垂直分割线高度
281+
$-divider-vertical-content-margin: var(--wot-divider-vertical-content-margin, 0 8px) !default; // 垂直分割线内容间距
282+
$-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !default; // 线条高度
283+
284+
285+
274286

275287
/* drop-menu */
276288
$-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度

‎src/uni_modules/wot-design-uni/components/wd-divider/index.scss‎

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,86 @@
1515
position: relative;
1616
display: flex;
1717
padding: $-divider-padding;
18+
margin: $-divider-margin;
1819
align-items: center;
1920
color: $-divider-color;
2021
font-size: $-divider-fs;
2122

22-
@include e(line) {
23-
display: block;
23+
&::after,
24+
&::before {
2425
flex: 1;
25-
height: 1px;
26-
transform: scaleY(0.5);
27-
background: $-divider-line-color;
26+
display: block;
27+
box-sizing: border-box;
28+
border-style: solid;
29+
border-color: $-divider-line-color;
30+
border-width: $-divider-line-height 0 0;
2831
}
29-
@include e(content) {
30-
padding: 0 12px;
32+
33+
&::before {
34+
content: '';
3135
}
32-
}
36+
37+
@include m(center, left, right) {
38+
&::after {
39+
content: '';
40+
margin-left: $-divider-content-left-margin;
41+
}
42+
43+
&::before {
44+
margin-right: $-divider-content-right-margin;
45+
}
46+
}
47+
48+
@include m(left) {
49+
&::before {
50+
max-width: $-divider-content-left-width;
51+
}
52+
}
53+
54+
@include m(right) {
55+
&::after {
56+
max-width: $-divider-content-right-width;
57+
}
58+
}
59+
60+
@include when(hairline) {
61+
62+
&::before,
63+
&::after {
64+
transform: scaleY(0.5);
65+
}
66+
}
67+
68+
@include when(dashed) {
69+
70+
&::before,
71+
&::after {
72+
border-style: dashed;
73+
}
74+
}
75+
76+
@include m(vertical) {
77+
display: inline-block;
78+
width: $-divider-vertical-line-width;
79+
height: $-divider-vertical-height;
80+
margin: $-divider-vertical-content-margin;
81+
padding: 0;
82+
vertical-align: middle;
83+
84+
&::before {
85+
height: 100%;
86+
border-width: 0 0 0 $-divider-vertical-line-width;
87+
}
88+
89+
&::after {
90+
display: none;
91+
}
92+
93+
@include when(hairline) {
94+
&::before {
95+
transform: scaleX(0.5);
96+
}
97+
}
98+
}
99+
100+
}

‎src/uni_modules/wot-design-uni/components/wd-divider/types.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
11
import type { ExtractPropTypes } from 'vue'
2-
import { baseProps, makeStringProp } from '../common/props'
2+
import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
3+
4+
export type DividerPosition = 'center' | 'left' | 'right'
5+
export type DividerDirection = 'horizontal' | 'vertical'
36

47
export const dividerProps = {
58
...baseProps,
69
/**
7-
* 自定义颜色，所有颜色的写法
10+
* 自定义颜色
11+
*/
12+
color: makeStringProp(''),
13+
/**
14+
* 内容位置，可选值为 `left` `right` `center`
15+
* 默认值：`center`
16+
*/
17+
contentPosition: makeStringProp<DividerPosition>('center'),
18+
/**
19+
* 是否显示为虚线
20+
* 默认值：`false`
21+
*/
22+
dashed: Boolean,
23+
/**
24+
* 是否为垂直分割线
25+
* 默认值：`false`
26+
*/
27+
vertical: makeBooleanProp(false),
28+
/**
29+
* 是否显示为 0.5px 的线
30+
* 默认值：`true`
831
*/
9-
color: makeStringProp('')
32+
hairline: makeBooleanProp(true)
1033
}
1134

1235
export type DividerProps = ExtractPropTypes<typeof dividerProps>

‎src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<template>
2-
<view :class="`wd-divider ${customClass}`" :style="customStyle">
3-
<view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
4-
<view class="wd-divider__content" :style="color ? 'color: ' + color : ''">
5-
<slot></slot>
6-
</view>
7-
<view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
2+
<view :class="rootClass" :style="rootStyle">
3+
<slot v-if="!vertical"></slot>
84
</view>
95
</template>
106
<script lang="ts">
@@ -19,9 +15,36 @@ export default {
1915
</script>
2016

2117
<script lang="ts" setup>
18+
import { computed, useSlots } from 'vue'
2219
import { dividerProps } from './types'
2320
24-
defineProps(dividerProps)
21+
const props = defineProps(dividerProps)
22+
const slots = useSlots()
23+
24+
const rootStyle = computed(() => {
25+
return `--wot-divider-color:${props.color};${props.customStyle}`
26+
})
27+
28+
const rootClass = computed(() => {
29+
const prefixCls = 'wd-divider'
30+
if (!props.vertical) {
31+
return {
32+
[prefixCls]: true,
33+
[`${prefixCls}--center`]: slots.default,
34+
[`${prefixCls}--left`]: props.contentPosition === 'left',
35+
[`${prefixCls}--right`]: props.contentPosition === 'right',
36+
['is-dashed']: props.dashed,
37+
['is-hairline']: props.hairline
38+
}
39+
} else {
40+
return {
41+
[prefixCls]: true,
42+
[`${prefixCls}--vertical`]: true,
43+
['is-dashed']: props.dashed,
44+
['is-hairline']: props.hairline
45+
}
46+
}
47+
})
2548
</script>
2649

2750
<style lang="scss" scoped>

0 commit comments

Comments
 (0)