fix: 优化 divider 垂直类型写法 (#2664)

* fix: 优化 divider 垂直类型写法 * fix: 移除冗余代码 * fix: 优化demo写法 * fix: 移除无用属性
jdf2e · Oct 29, 2024 · f313eb3 · f313eb3
1 parent 61f6431
commit f313eb3
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 23 deletions.
diff --git a/src/packages/divider/demos/h5/demo6.tsx b/src/packages/divider/demos/h5/demo6.tsx
@@ -7,11 +7,11 @@ const Demo6 = () => {
       <div>
         文本
         <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>
+        <a href="#" style={{ color: '#1989fa', verticalAlign: 'middle' }}>
           链接
         </a>
         <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>
+        <a href="#" style={{ color: '#1989fa', verticalAlign: 'middle' }}>
           链接
         </a>
       </div>

diff --git a/src/packages/divider/demos/taro/demo6.tsx b/src/packages/divider/demos/taro/demo6.tsx
@@ -1,21 +1,30 @@
 import React from 'react'
 import { Divider } from '@nutui/nutui-react-taro'
+import { View, Text } from '@tarojs/components'
 
 const Demo6 = () => {
   return (
-    <>
-      <div>
-        文本
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>
-          链接
-        </a>
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>
-          链接
-        </a>
-      </div>
-    </>
+    <View>
+      文本
+      <Divider direction="vertical" />
+      <Text
+        onClick={() => {
+          console.log('跳转')
+        }}
+        style={{ color: '#1989fa', verticalAlign: 'middle' }}
+      >
+        链接
+      </Text>
+      <Divider direction="vertical" />
+      <Text
+        onClick={() => {
+          console.log('跳转')
+        }}
+        style={{ color: '#1989fa', verticalAlign: 'middle' }}
+      >
+        链接
+      </Text>
+    </View>
   )
 }
 export default Demo6
diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
@@ -49,13 +49,12 @@
   }
 
   &-vertical {
-    position: relative;
-    top: $divider-vertical-top;
     display: inline-block;
     width: auto;
     height: $divider-vertical-height;
     border-left: 1px solid $divider-border-color;
     margin: $divider-vertical-margin;
+    vertical-align: middle;
   }
 }
 

diff --git a/src/packages/divider/doc.en-US.md b/src/packages/divider/doc.en-US.md
@@ -90,5 +90,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-divider-line-height | The row height of the dividing line | `2px` |
 | \--nutui-divider-spacing | The spacing value between the dividing line of the text | `8px` |
 | \--nutui-divider-vertical-height | The height of the vertical split line | `12px` |
-| \--nutui-divider-vertical-top | The top value of the vertical split line | `2px` |
 | \--nutui-divider-vertical-margin | The margin value of the vertical split line | `0 8px` |
diff --git a/src/packages/divider/doc.md b/src/packages/divider/doc.md
@@ -90,5 +90,4 @@ import { Divider } from '@nutui/nutui-react'
 | \--nutui-divider-line-height | 分割线的行高 | `2px` |
 | \--nutui-divider-spacing | 左边分割线与文案的间隔值 | `8px` |
 | \--nutui-divider-vertical-height | 垂直分割线的高度 | `12px` |
-| \--nutui-divider-vertical-top | 垂直分割线的top值 | `2px` |
 | \--nutui-divider-vertical-margin | 垂直分割线的margin值 | `0 8px` |
diff --git a/src/packages/divider/doc.taro.md b/src/packages/divider/doc.taro.md
@@ -90,5 +90,4 @@ import { Divider } from '@nutui/nutui-react-taro'
 | \--nutui-divider-line-height | 分割线的行高 | `2px` |
 | \--nutui-divider-spacing | 左边分割线与文案的间隔值 | `8px` |
 | \--nutui-divider-vertical-height | 垂直分割线的高度 | `12px` |
-| \--nutui-divider-vertical-top | 垂直分割线的top值 | `2px` |
 | \--nutui-divider-vertical-margin | 垂直分割线的margin值 | `0 8px` |
diff --git a/src/packages/divider/doc.zh-TW.md b/src/packages/divider/doc.zh-TW.md
@@ -90,5 +90,4 @@ import { Divider } from '@nutui/nutui-react'
 | \--nutui-divider-line-height | 分割線的行高 | `2px` |
 | \--nutui-divider-spacing | 左邊分割線與文案的間隔值 | `8px` |
 | \--nutui-divider-vertical-height | 垂直分割線的高度 | `12px` |
-| \--nutui-divider-vertical-top | 垂直分割線的top值 | `2px` |
 | \--nutui-divider-vertical-margin | 垂直分割線的margin值 | `0 8px` |
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
@@ -488,7 +488,6 @@ $divider-line-height: var(--nutui-divider-line-height, 2px) !default;
 $divider-spacing: var(--nutui-divider-spacing, $spacing-base) !default;
 $divider-side-width: var(--nutui-divider-side-width, 16px) !default;
 $divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default;
-$divider-vertical-top: var(--nutui-divider-vertical-top, 2px) !default;
 $divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default;
 
 // icon（✅）

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -454,7 +454,6 @@ $divider-line-height: var(--nutui-divider-line-height, 2px) !default;
 $divider-spacing: var(--nutui-divider-spacing, 8px) !default;
 $divider-side-width: var(--nutui-divider-side-width, 10%) !default;
 $divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default;
-$divider-vertical-top: var(--nutui-divider-vertical-top, 2px) !default;
 $divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default;
 
 // icon（✅）