feat: ✨ 优化 Divider 分割线功能支持虚线、垂直等功能 (#737)

Moonofweisheng · Nov 26, 2024 · 1b9d7e6 · 1b9d7e6
1 parent abc8488
commit 1b9d7e6
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 42 deletions.
diff --git a/docs/component/divider.md b/docs/component/divider.md
@@ -1,14 +1,53 @@
 <frame/>
 
-#  Divider 分割线
+# Divider 分割线
 
+:::danger 请注意
+`hairline`、`dashed`、`content-position`、`vertical`属性为 $LOWEST_VERSION$ 版本新增支持，在此之前仅支持默认插槽显示文本和自定义`color`。
+:::
 
 ## 基本使用
 
-使用默认插槽设置内容。
+默认渲染一条水平分割线。
 
 ```html
-<wd-divider>这是分割线</wd-divider>
+<wd-divider></wd-divider>
+```
+
+## 展示文本
+
+使用默认插槽在分割线中间插入内容。
+
+```html
+<wd-divider>展示文本</wd-divider>
+```
+
+## 自定义渲染内容
+
+使用默认插槽在分割线中间插入自定义内容。
+
+```html
+<wd-divider>
+  <wd-icon name="arrow-down" size="20" color="#1989fa" />
+</wd-divider>
+```
+
+## 内容位置
+
+通过 `content-position` 指定内容所在位置。
+
+```html
+<wd-divider>中间</wd-divider>
+<wd-divider content-position="left">左侧</wd-divider>
+<wd-divider content-position="right">右侧</wd-divider>
+```
+
+## 虚线
+
+添加 `dashed` 属性使分割线渲染为虚线。
+
+```html
+<wd-divider dashed>虚线分割</wd-divider>
 ```
 
 ## 自定义颜色
@@ -19,20 +58,48 @@
 <wd-divider color="#4D80F0">自定义颜色</wd-divider>
 ```
 
+## 垂直分割线
+
+添加 `vertical` 属性使分割线渲染为垂直分割线。
+
+```html
+<view class="content">
+  文本
+  <wd-divider vertical />
+  文本
+  <wd-divider vertical dashed />
+  文本
+  <wd-divider vertical :hairline="false" />
+  文本
+  <wd-divider vertical color="#1989fa" />
+  文本
+</view>
+```
+
+```css
+.content {
+  padding: 12rpx 15px;
+}
+```
+
 ## Attributes
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|--------|
-| color | 自定义颜色，所有颜色的写法 | string | - | - | - |
+| 参数             | 说明                           | 类型    | 可选值                  | 默认值   | 最低版本         |
+| ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- |
+| color            | 自定义颜色，支持所有颜色的写法 | string  | -                       | -        | -                |
+| hairline         | 是否显示边框                   | boolean | -                       | true     | $LOWEST_VERSION$ |
+| dashed           | 是否显示为虚线                 | boolean | -                       | false    | $LOWEST_VERSION$ |
+| content-position | 内容位置                       | string  | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ |
+| vertical         | 是否显示为垂直分割线           | boolean | -                       | false    | $LOWEST_VERSION$ |
 
 ## Slot
 
-| name | 说明 | 最低版本 |
-|------|-----|---------|
-| default | 内容 | - |
+| name    | 说明 | 最低版本 |
+| ------- | ---- | -------- |
+| default | 内容，仅在 `vertical` 为 `false` 时生效 | -        |
 
 ## 外部样式类
 
-| 类名 | 说明 | 最低版本 |
-|-----|-----|---------|
-| custom-class | 根节点样式 | - |
+| 类名         | 说明       | 最低版本 |
+| ------------ | ---------- | -------- |
+| custom-class | 根节点样式 | -        |
diff --git a/src/pages/divider/Index.vue b/src/pages/divider/Index.vue
@@ -1,21 +1,51 @@
-<!--
- * @Author: weisheng
- * @Date: 2023-06-13 11:47:12
- * @LastEditTime: 2023-08-07 20:19:49
- * @LastEditors: weisheng
- * @Description: 
- * @FilePath: \wot-design-uni\src\pages\divider\Index.vue
- * 记得注释
--->
 <template>
   <page-wraper>
     <demo-block title="基本用法" transparent>
-      <wd-divider>这是分割线</wd-divider>
+      <wd-divider></wd-divider>
     </demo-block>
+
+    <demo-block title="展示文本" transparent>
+      <wd-divider>展示文本</wd-divider>
+    </demo-block>
+
+    <demo-block title="自定义渲染内容" transparent>
+      <wd-divider>
+        <wd-icon name="arrow-down" size="20" />
+      </wd-divider>
+    </demo-block>
+
+    <demo-block title="内容位置" transparent>
+      <wd-divider>中间</wd-divider>
+      <wd-divider content-position="left">左侧</wd-divider>
+      <wd-divider content-position="right">右侧</wd-divider>
+    </demo-block>
+
+    <demo-block title="虚线" transparent>
+      <wd-divider dashed>虚线分割</wd-divider>
+    </demo-block>
+
     <demo-block title="自定义颜色" transparent>
       <wd-divider color="#4D80F0">自定义颜色</wd-divider>
     </demo-block>
+
+    <demo-block title="垂直分割线" transparent>
+      <view class="content">
+        文本
+        <wd-divider vertical />
+        文本
+        <wd-divider vertical dashed />
+        文本
+        <wd-divider vertical :hairline="false" />
+        文本
+        <wd-divider vertical color="#1989fa" />
+        文本
+      </view>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup></script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.content {
+  padding: 12rpx 15px;
+}
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -268,9 +268,21 @@ $-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; /
 
 /* divider */
 $-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距
+$-divider-margin: var(--wot-divider-margin, 16px 0) !default; // 上下间距
 $-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
-$-divider-line-color: var(--wot-divider-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色
+$-divider-line-color: var(--wot-divider-line-color, currentColor) !default; // 线条颜色
+$-divider-line-height: var(--wot-divider-line-height, 1px) !default; // 线条高度
 $-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小
+$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default; // 左侧内容宽度
+$-divider-content-left-margin: var(--wot-divider-content-left-margin, 12px) !default; // 左侧内容距离线距离
+$-divider-content-right-margin: var(--wot-divider-content-right-margin, 12px) !default; // 右侧内容距离线距离
+$-divider-content-right-width: var(--wot-divider-content-right-width, 10%) !default; // 右侧内容宽度
+$-divider-vertical-height: var(--wot-divider-vertical-height, 16px) !default; // 垂直分割线高度
+$-divider-vertical-content-margin: var(--wot-divider-vertical-content-margin, 0 8px) !default; // 垂直分割线内容间距
+$-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !default; // 线条高度
+
+
+
 
 /* drop-menu */
 $-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度

diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/index.scss b/src/uni_modules/wot-design-uni/components/wd-divider/index.scss
@@ -15,18 +15,86 @@
   position: relative;
   display: flex;
   padding: $-divider-padding;
+  margin: $-divider-margin;
   align-items: center;
   color: $-divider-color;
   font-size: $-divider-fs;
 
-  @include e(line) {
-    display: block;
+  &::after,
+  &::before {
     flex: 1;
-    height: 1px;
-    transform: scaleY(0.5);
-    background: $-divider-line-color;
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: $-divider-line-color;
+    border-width: $-divider-line-height 0 0;
   }
-  @include e(content) {
-    padding: 0 12px;
+
+  &::before {
+    content: '';
   }
-}
+
+  @include m(center, left, right) {
+    &::after {
+      content: '';
+      margin-left: $-divider-content-left-margin;
+    }
+
+    &::before {
+      margin-right: $-divider-content-right-margin;
+    }
+  }
+
+  @include m(left) {
+    &::before {
+      max-width: $-divider-content-left-width;
+    }
+  }
+
+  @include m(right) {
+    &::after {
+      max-width: $-divider-content-right-width;
+    }
+  }
+
+  @include when(hairline) {
+
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @include when(dashed) {
+
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: $-divider-vertical-line-width;
+    height: $-divider-vertical-height;
+    margin: $-divider-vertical-content-margin;
+    padding: 0;
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 $-divider-vertical-line-width;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    @include when(hairline) {
+      &::before {
+        transform: scaleX(0.5);
+      }
+    }
+  }
+
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/types.ts b/src/uni_modules/wot-design-uni/components/wd-divider/types.ts
@@ -1,12 +1,35 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DividerPosition = 'center' | 'left' | 'right'
+export type DividerDirection = 'horizontal' | 'vertical'
 
 export const dividerProps = {
   ...baseProps,
   /**
-   * 自定义颜色，所有颜色的写法
+   * 自定义颜色
+   */
+  color: makeStringProp(''),
+  /**
+   * 内容位置，可选值为 `left` `right` `center`
+   * 默认值：`center`
+   */
+  contentPosition: makeStringProp<DividerPosition>('center'),
+  /**
+   * 是否显示为虚线
+   * 默认值：`false`
+   */
+  dashed: Boolean,
+  /**
+   * 是否为垂直分割线
+   * 默认值：`false`
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 是否显示为 0.5px 的线
+   * 默认值：`true`
    */
-  color: makeStringProp('')
+  hairline: makeBooleanProp(true)
 }
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue b/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
@@ -1,10 +1,6 @@
 <template>
-  <view :class="`wd-divider ${customClass}`" :style="customStyle">
-    <view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
-    <view class="wd-divider__content" :style="color ? 'color: ' + color : ''">
-      <slot></slot>
-    </view>
-    <view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
+  <view :class="rootClass" :style="rootStyle">
+    <slot v-if="!vertical"></slot>
   </view>
 </template>
 <script lang="ts">
@@ -19,9 +15,36 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { computed, useSlots } from 'vue'
 import { dividerProps } from './types'
 
-defineProps(dividerProps)
+const props = defineProps(dividerProps)
+const slots = useSlots()
+
+const rootStyle = computed(() => {
+  return `--wot-divider-color:${props.color};${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  const prefixCls = 'wd-divider'
+  if (!props.vertical) {
+    return {
+      [prefixCls]: true,
+      [`${prefixCls}--center`]: slots.default,
+      [`${prefixCls}--left`]: props.contentPosition === 'left',
+      [`${prefixCls}--right`]: props.contentPosition === 'right',
+      ['is-dashed']: props.dashed,
+      ['is-hairline']: props.hairline
+    }
+  } else {
+    return {
+      [prefixCls]: true,
+      [`${prefixCls}--vertical`]: true,
+      ['is-dashed']: props.dashed,
+      ['is-hairline']: props.hairline
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>