feat: popover 增加交互样式，提取元素变量 (#681)

src/packages/popover/doc.en-US.md

@@ -227,6 +227,16 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value |
 | --- | --- |
+| --nutui-popover-border-radius`v1.4.8` | ` 8px`|
+| --nutui-popover-font-size`v1.4.8` | ` $font-size-1` |
+| --nutui-popover-menu-item-height`v1.4.8` | ` 30px` |
+| --nutui-popover-menu-item-name-margin`v1.4.8` | ` 0px 10px` |
+| --nutui-popover-menu-item-hover-background-color`v1.4.8` | `  $primary-color`|
+| --nutui-popover-menu-item-hover-text-color`v1.4.8` | ` $primary-text-color`|
+| --nutui-popover-menu-item-border-width`v1.4.8` | ` 80%`|
+| --nutui-popover-menu-item-border-height`v1.4.8` | ` 1px`|
+| --nutui-popover-menu-item-border-left`v1.4.8` | ` 10%`|
+| --nutui-popover-menu-item-border-bottom`v1.4.8` | ` 2%`|
 | --nutui-popover-white-background-color | `  rgba(255, 255, 255, 1)` |
 | --nutui-popover-dark-background-color | `  rgba(75, 76, 77, 1)` |
 | --nutui-popover-border-bottom-color | `  rgba(229, 229, 229, 1)` |

src/packages/popover/doc.md

@@ -257,6 +257,16 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 
 | 名称 | 默认值 |
 | --- | --- |
+| --nutui-popover-border-radius`v1.4.8` | ` 8px`|
+| --nutui-popover-font-size`v1.4.8` | ` $font-size-1` |
+| --nutui-popover-menu-item-height`v1.4.8` | ` 30px` |
+| --nutui-popover-menu-item-name-margin`v1.4.8` | ` 0px 10px` |
+| --nutui-popover-menu-item-hover-background-color`v1.4.8` | `  $primary-color`|
+| --nutui-popover-menu-item-hover-text-color`v1.4.8` | ` $primary-text-color`|
+| --nutui-popover-menu-item-border-width`v1.4.8` | ` 80%`|
+| --nutui-popover-menu-item-border-height`v1.4.8` | ` 1px`|
+| --nutui-popover-menu-item-border-left`v1.4.8` | ` 10%`|
+| --nutui-popover-menu-item-border-bottom`v1.4.8` | ` 2%`|
 | --nutui-popover-white-background-color | `  rgba(255, 255, 255, 1)` |
 | --nutui-popover-dark-background-color | `  rgba(75, 76, 77, 1)` |
 | --nutui-popover-border-bottom-color | `  rgba(229, 229, 229, 1)` |

src/packages/popover/doc.taro.md

@@ -256,6 +256,16 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 
 | 名称 | 默认值 |
 | --- | --- |
+| --nutui-popover-border-radius`v1.4.8` | ` 8px`|
+| --nutui-popover-font-size`v1.4.8` | ` $font-size-1` |
+| --nutui-popover-menu-item-height`v1.4.8` | ` 30px` |
+| --nutui-popover-menu-item-name-margin`v1.4.8` | ` 0px 10px` |
+| --nutui-popover-menu-item-hover-background-color`v1.4.8` | `  $primary-color`|
+| --nutui-popover-menu-item-hover-text-color`v1.4.8` | ` $primary-text-color`|
+| --nutui-popover-menu-item-border-width`v1.4.8` | ` 80%`|
+| --nutui-popover-menu-item-border-height`v1.4.8` | ` 1px`|
+| --nutui-popover-menu-item-border-left`v1.4.8` | ` 10%`|
+| --nutui-popover-menu-item-border-bottom`v1.4.8` | ` 2%`|
 | --nutui-popover-white-background-color | `  rgba(255, 255, 255, 1)` |
 | --nutui-popover-dark-background-color | `  rgba(75, 76, 77, 1)` |
 | --nutui-popover-border-bottom-color | `  rgba(229, 229, 229, 1)` |

src/packages/popover/doc.zh-TW.md

@@ -257,6 +257,16 @@ List 屬性是一個由對象構成的數組，數組中的每個對象配置一
 
 | 名稱 | 默認值 |
 | --- | --- |
+| --nutui-popover-border-radius`v1.4.8` | ` 8px`|
+| --nutui-popover-font-size`v1.4.8` | ` $font-size-1` |
+| --nutui-popover-menu-item-height`v1.4.8` | ` 30px` |
+| --nutui-popover-menu-item-name-margin`v1.4.8` | ` 0px 10px` |
+| --nutui-popover-menu-item-hover-background-color`v1.4.8` | `  $primary-color`|
+| --nutui-popover-menu-item-hover-text-color`v1.4.8` | ` $primary-text-color`|
+| --nutui-popover-menu-item-border-width`v1.4.8` | ` 80%`|
+| --nutui-popover-menu-item-border-height`v1.4.8` | ` 1px`|
+| --nutui-popover-menu-item-border-left`v1.4.8` | ` 10%`|
+| --nutui-popover-menu-item-border-bottom`v1.4.8` | ` 2%`|
 | --nutui-popover-white-background-color | `  rgba(255, 255, 255, 1)` |
 | --nutui-popover-dark-background-color | `  rgba(75, 76, 77, 1)` |
 | --nutui-popover-border-bottom-color | `  rgba(229, 229, 229, 1)` |

src/packages/popover/popover.scss

@@ -20,18 +20,79 @@
 
   .popover-arrow {
     position: absolute;
+    z-index: -1;
     width: 0;
     height: 0;
     border: 8px solid transparent;
   }
 
-  // top
+  .popover-content {
+    z-index: 12;
+    background: $popover-white-background-color;
+    border-radius: $popover-border-radius;
+    opacity: 1;
+    font-size: $popover-font-size;
+    font-weight: normal;
+    color: $popover-primary-text-color;
+    position: absolute;
+    box-shadow: 0 2px 12px #3232331f;
+    opacity: 0;
+    transition: opacity 0.1s;
+
+    &.popover-content-show {
+      opacity: 1;
+    }
+
+    .popover-menu-item {
+      position: relative;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      height: $popover-menu-item-height;
+
+      .popover-menu-item-name {
+        margin: $popover-menu-item-name-margin;
+        width: 100%;
+      }
+
+      &:first-child {
+        border-radius: $popover-border-radius $popover-border-radius 0 0;
+      }
+
+      &:last-child {
+        border-bottom: none;
+        border-radius: 0 0 $popover-border-radius $popover-border-radius;
+
+        &::after {
+          height: 0;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+        color: $popover-menu-item-hover-text-color;
+        background-color: $popover-menu-item-hover-background-color;
+      }
+
+      &::after {
+        position: absolute;
+        left: $popover-menu-item-border-left;
+        bottom: $popover-menu-item-border-bottom;
+        content: ' ';
+        display: inline-block;
+        width: $popover-menu-item-border-width;
+        height: $popover-menu-item-border-height;
+        background-color: $popover-border-bottom-color;
+      }
+    }
+  }
 
+  // top
   .popover-arrow-top {
     bottom: 0;
     border-top-color: $popover-white-background-color;
     border-bottom-width: 0;
-    margin-bottom: -8px;
+    margin-bottom: -7px;
   }
 
   .popover-content--top {
@@ -109,7 +170,7 @@
     top: 0px;
     border-bottom-color: $popover-white-background-color;
     border-top-width: 0;
-    margin-top: -8px;
+    margin-top: -7px;
   }
 
   .popover-arrow--bottom {
@@ -173,51 +234,15 @@
     transform: translateY(0%);
   }
 
-  .popover-content {
-    z-index: 12;
-    background: $popover-white-background-color;
-    border-radius: 5px;
-    opacity: 1;
-    font-size: 14px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: $popover-primary-text-color;
-    position: absolute;
-    box-shadow: 0 2px 12px #3232331f;
-    opacity: 0;
-    transition: opacity 0.1s;
-
-    &.popover-content-show {
-      opacity: 1;
-    }
-
-    .popover-menu-item {
-      display: flex;
-      align-items: center;
-      padding-bottom: 8px;
-      margin: 8px;
-      border-bottom: 1px solid $popover-border-bottom-color;
-
-      &:first-child {
-        margin-top: 15px;
-      }
-
-      &:last-child {
-        margin-bottom: 2px;
-        border-bottom: none;
-      }
-
-      .popover-menu-item-name {
-        margin-right: 12px;
-        margin-left: 8px;
-        width: 100%;
-      }
-    }
-  }
-
-  .disabled {
+  .popover-menu-item.disabled {
     color: $popover-disable-color;
     cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+      color: $popover-disable-color;
+      background-color: $popover-white-background-color;
+    }
   }
 }
 

src/packages/popover/popover.taro.tsx

@@ -5,6 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { ITouchEvent } from '@tarojs/components'
 import Trigger from './Trigger'
 import Icon from '@/packages/icon/index.taro'
 import Overlay from '@/packages/overlay/index.taro'
@@ -12,8 +13,6 @@ import { getRectByTaro } from '../../utils/useClientRect'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
-import { ITouchEvent } from '@tarojs/components'
-
 export type PopoverTheme = 'light' | 'dark'
 
 export type PopoverLocation =
@@ -164,31 +163,37 @@ export const Popover: FunctionComponent<
               <div className={`${popoverContent}`} style={getStyle()}>
                 <div className={`${popoverArrow}`} />
                 {Array.isArray(children) ? children[1] : ''}
-                {list.map((item: List, i: number) => {
-                  return (
-                    <div
-                      key={item.name}
-                      className={`popover-menu-item ${
-                        item.disabled ? 'disabled' : ''
-                      }`}
-                      onClick={() => {
-                        handleChoose(item, i)
-                      }}
-                    >
-                      {item.icon ? (
-                        <Icon
-                          classPrefix={iconClassPrefix}
-                          fontClassName={iconFontClassName}
-                          className="popover-menu-item-img"
-                          name={item.icon}
-                        />
-                      ) : (
-                        ''
-                      )}
-                      <div className="popover-menu-item-name">{item.name}</div>
-                    </div>
-                  )
-                })}
+
+                <div>
+                  {' '}
+                  {list.map((item: List, i: number) => {
+                    return (
+                      <div
+                        key={item.name}
+                        className={`popover-menu-item ${
+                          item.disabled ? 'disabled' : ''
+                        }`}
+                        onClick={() => {
+                          handleChoose(item, i)
+                        }}
+                      >
+                        {item.icon ? (
+                          <Icon
+                            classPrefix={iconClassPrefix}
+                            fontClassName={iconFontClassName}
+                            className="popover-menu-item-img"
+                            name={item.icon}
+                          />
+                        ) : (
+                          ''
+                        )}
+                        <div className="popover-menu-item-name">
+                          {item.name}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
               </div>
             ) : null}
           </div>

src/packages/popover/popover.tsx

@@ -161,31 +161,35 @@ export const Popover: FunctionComponent<
               <div className={`${popoverContent}`} style={getStyle()}>
                 <div className={`${popoverArrow}`} />
                 {Array.isArray(children) ? children[1] : ''}
-                {list.map((item: List, i: number) => {
-                  return (
-                    <div
-                      key={item.name}
-                      className={`popover-menu-item ${
-                        item.disabled ? 'disabled' : ''
-                      }`}
-                      onClick={() => {
-                        handleChoose(item, i)
-                      }}
-                    >
-                      {item.icon ? (
-                        <Icon
-                          classPrefix={iconClassPrefix}
-                          fontClassName={iconFontClassName}
-                          className="popover-menu-item-img"
-                          name={item.icon}
-                        />
-                      ) : (
-                        ''
-                      )}
-                      <div className="popover-menu-item-name">{item.name}</div>
-                    </div>
-                  )
-                })}
+                <div>
+                  {list.map((item: List, i: number) => {
+                    return (
+                      <div
+                        key={item.name}
+                        className={`popover-menu-item ${
+                          item.disabled ? 'disabled' : ''
+                        }`}
+                        onClick={() => {
+                          handleChoose(item, i)
+                        }}
+                      >
+                        {item.icon ? (
+                          <Icon
+                            classPrefix={iconClassPrefix}
+                            fontClassName={iconFontClassName}
+                            className="popover-menu-item-img"
+                            name={item.icon}
+                          />
+                        ) : (
+                          ''
+                        )}
+                        <div className="popover-menu-item-name">
+                          {item.name}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
               </div>
             ) : null}
           </div>

src/styles/variables.scss

@@ -1329,6 +1329,37 @@ $badge-dot-border-radius: var(--nutui-badge-dot-border-radius, 7px) !default;
 $badge-dot-padding: var(--nutui-badge-dot-padding, 0px) !default;
 
 //popover（✅）
+$popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-1) !default;
+$popover-menu-item-height: var(--nutui-popover-menu-item-height, 30px) !default;
+$popover-menu-item-name-margin: var(
+  --nutui-popover-menu-item-name-margin,
+  0px 10px
+) !default;
+$popover-menu-item-hover-background-color: var(
+  --nutui-popover-menu-item-hover-background-color,
+  $primary-color
+) !default;
+$popover-menu-item-hover-text-color: var(
+  --nutui-popover-menu-item-hover-text-color,
+  $primary-text-color
+) !default;
+$popover-menu-item-border-width: var(
+  --nutui-popover-menu-item-border-width,
+  80%
+) !default;
+$popover-menu-item-border-height: var(
+  --nutui-popover-menu-item-border-height,
+  1px
+) !default;
+$popover-menu-item-border-left: var(
+  --nutui-popover-menu-item-border-left,
+  10%
+) !default;
+$popover-menu-item-border-bottom: var(
+  --nutui-popover-menu-item-border-bottom,
+  2%
+) !default;
 $popover-white-background-color: var(
   --nutui-popover-white-background-color,
   rgba(255, 255, 255, 1)