feat(components): [el-divider] support setting the dividing line style (#4435)

* feat(components): [el-divider] support setting the dividing line style

* Update divider.md

docs/en-US/component/divider.md

@@ -27,6 +27,16 @@ divider/custom-content
 
 :::
 
+## dashed line
+
+You can set the style of divider.
+
+:::demo
+
+divider/line-dashed
+
+:::
+
 ## Vertical divider
 
 :::demo
@@ -37,7 +47,8 @@ divider/vertical-divider
 
 ## Divider Attributes
 
-| Attribute        | Description                               | Type   | Accepted Values       | Default    |
-| ---------------- | ----------------------------------------- | ------ | --------------------- | ---------- |
-| direction        | Set divider's direction                   | string | horizontal / vertical | horizontal |
-| content-position | customize the content on the divider line | String | left / right / center | center     |
+| Attribute        | Description                               | Type   | Accepted Values                                                                   | Default    |
+| ---------------- | ----------------------------------------- | ------ | --------------------------------------------------------------------------------- | ---------- |
+| direction        | Set divider's direction                   | string | horizontal / vertical                                                             | horizontal |
+| border-style     | Set the style of divider                  | string | [CSS/border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | solid      |
+| content-position | customize the content on the divider line | String | left / right / center                                                             | center     |

docs/examples/divider/custom-content.vue

@@ -2,14 +2,14 @@
   <div>
     <span>What you are you do not see, what you see is your shadow. </span>
     <el-divider content-position="left">Rabindranath Tagore</el-divider>
-    <span>I cannot choose the best. The best chooses me.</span>
-    <el-divider>
-      <el-icon><star-filled /></el-icon>
-    </el-divider>
     <span
       >My wishes are fools, they shout across thy song, my Master. Let me but
       listen.</span
     >
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
     <el-divider content-position="right">Rabindranath Tagore</el-divider>
   </div>
 </template>

docs/examples/divider/line-dashed.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <span>What language is thine, O sea?</span>
+    <el-divider border-style="dashed"></el-divider>
+    <span>The language of eternal question.</span>
+  </div>
+  <el-divider border-style="dotted"></el-divider>
+  <span>What language is thy answer, O sky?</span>
+  <el-divider border-style="double"></el-divider>
+  <span>The language of eternal silence.</span>
+</template>

docs/examples/divider/vertical-divider.vue

@@ -3,7 +3,7 @@
     <span>Rain</span>
     <el-divider direction="vertical"></el-divider>
     <span>Home</span>
-    <el-divider direction="vertical"></el-divider>
+    <el-divider direction="vertical" border-style="dashed"></el-divider>
     <span>Grass</span>
   </div>
 </template>

packages/components/divider/__tests__/divider.spec.ts

@@ -42,4 +42,30 @@ describe('Divider.vue', () => {
     })
     expect(wrapper.classes()).toContain('customClass')
   })
+
+  test('line-dashed', () => {
+    const wrapper = mount(Divider, {
+      props: {
+        borderStyle: 'dashed',
+      },
+    })
+    expect(
+      getComputedStyle(wrapper.element, null).getPropertyValue(
+        '--el-border-style'
+      )
+    ).toBe('dashed')
+  })
+
+  test('line-solid', () => {
+    const wrapper = mount(Divider, {
+      props: {
+        direction: 'vertical',
+      },
+    })
+    expect(
+      getComputedStyle(wrapper.element, null).getPropertyValue(
+        '--el-border-style'
+      )
+    ).toBe('solid')
+  })
 })

packages/components/divider/src/divider.ts

@@ -1,7 +1,9 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
+export type BorderStyle = CSSStyleDeclaration['borderStyle']
+
 export const dividerProps = buildProps({
   direction: {
     type: String,
@@ -13,5 +15,9 @@ export const dividerProps = buildProps({
     values: ['left', 'center', 'right'],
     default: 'center',
   },
+  borderStyle: {
+    type: definePropType<BorderStyle>(String),
+    default: 'solid',
+  },
 } as const)
 export type DividerProps = ExtractPropTypes<typeof dividerProps>

packages/components/divider/src/divider.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['el-divider', `el-divider--${direction}`]">
+  <div
+    :class="['el-divider', `el-divider--${direction}`]"
+    :style="{ '--el-border-style': borderStyle }"
+  >
     <div
       v-if="$slots.default && direction !== 'vertical'"
       :class="['el-divider__text', `is-${contentPosition}`]"

packages/theme-chalk/src/divider.scss

@@ -2,7 +2,6 @@
 @use 'mixins/mixins' as *;
 
 @include b(divider) {
-  background-color: var(--el-border-color-base);
   position: relative;
 
   @include m(horizontal) {
@@ -10,6 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
+    border-top: 1px var(--el-border-color-base) var(--el-border-style);
   }
 
   @include m(vertical) {
@@ -19,6 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
+    border-left: 1px var(--el-border-color-base) var(--el-border-style);
   }
 
   @include e(text) {