feat(popover): 新增属性 action,简化css 变量

migrate-from-v1.md

@@ -626,6 +626,7 @@ plugins: [
 - 新增 `targetId` 属性，用于自定义目标元素 id
 - 新增 `onOpen` 属性，用于点击菜单时触发
 - 新增 `onClose` 属性，用于关闭菜单时触发
+- 新增 `action` 属性，用于为对应的选项添加方法
 - `onChoose` 重命名为 `onSelect`
 - 继承Popup组件的 `overlayStyle` 、`overlayClassName` 、`overlay` 、`closeOnOverlayClick` 属性。    
 

src/packages/popover/demo.scss

@@ -8,10 +8,12 @@
   .nut-popover-content {
     width: auto;
   }
+
   .self-content {
     width: 195px;
     display: flex;
     flex-wrap: wrap;
+
     &-item {
       margin-top: 10px;
       margin-bottom: 10px;
@@ -20,6 +22,7 @@
       align-items: center;
       flex-direction: column;
     }
+
     &-desc {
       margin-top: 5px;
       width: 60px;
@@ -33,6 +36,7 @@
   margin: 80px 0;
   display: flex;
   justify-content: center;
+
   .brick {
     width: 60px;
     height: 60px;
@@ -42,9 +46,7 @@
 }
 
 .custom-color {
-  --nutui-popover-primary-text-color: rgb(255, 255, 255);
+  --nutui-popover-text-color: rgb(255, 255, 255);
   --nutui-popover-content-background-color: rgb(255, 0, 0);
-  --nutui-popover-white-background-color: rgb(255, 0, 0);
-  --nutui-popover-menu-item-hover-text-color: rgb(255, 255, 255);
-  --nutui-popover-menu-item-hover-background-color: rgb(255, 0, 0);
+  --nutui-popover-border-color: rgb(255, 0, 0);
 }

src/packages/popover/demo.taro.tsx

@@ -8,10 +8,15 @@ import {
   Notice,
   Category,
 } from '@nutui/icons-react-taro'
+import { useTranslate } from '../../sites/assets/locale'
 import { Button, Popover, Cell, Picker } from '@/packages/nutui.react.taro'
 import '@/packages/popover/demo.scss'
 import Header from '@/sites/components/header'
 
+interface T {
+  [props: string]: string
+}
+
 interface List {
   key?: string
   name: string
@@ -29,6 +34,47 @@ interface PickerOption {
 }
 
 const PopoverDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      title: '基础用法',
+      title1: '选项配置',
+      title2: '自定义内容',
+      title3: '位置自定义',
+      title4: '自定义目标元素',
+      dark: '暗黑风格',
+      showIcon: '展示图标',
+      disableAction: '禁用选项',
+      content: '自定义内容',
+      contentColor: '自定义颜色',
+      showMoreDirection: '点击查看更多方向',
+    },
+    'en-US': {
+      title: 'Basic Usage',
+      title1: 'Option Configuration',
+      title2: 'Custom Content',
+      title3: 'Custom Location',
+      title4: 'Custom Target Element',
+      dark: 'Dark',
+      showIcon: 'Show Icon',
+      disableAction: 'Disabled',
+      content: 'Custom Content',
+      contentColor: 'Custom Color',
+      showMoreDirection: 'click show more direction',
+    },
+    'zh-TW': {
+      title: '基礎用法',
+      title1: '選項配置',
+      title2: '自定義內容',
+      title3: '位置自定義',
+      title4: '自定義目標元素',
+      dark: '暗黑風格',
+      showIcon: '展示圖標',
+      disableAction: '禁用選項',
+      content: '自定義內容',
+      contentColor: '自定義顏色',
+      showMoreDirection: '點擊查看更多方向',
+    },
+  })
   const selfContentStyle = {
     width: '195px',
     display: 'flex',
@@ -67,19 +113,24 @@ const PopoverDemo = () => {
     {
       key: 'key1',
       name: 'option1',
-      icon: (
-        <Home color="rgba(250, 44, 25, 1)" style={{ marginRight: '8px' }} />
-      ),
+      icon: <Home color="rgba(250, 44, 25, 1)" />,
+      action: {
+        icon: <Home />,
+        onClick: (e: any) => {
+          console.log('onclick 1')
+          e.stopPropagation()
+        },
+      },
     },
     {
       key: 'key2',
       name: 'option2',
-      icon: <Cart style={{ marginRight: '8px' }} />,
+      icon: <Cart />,
     },
     {
       key: 'key3',
       name: 'option3',
-      icon: <Location style={{ marginRight: '8px' }} />,
+      icon: <Location />,
     },
   ]
   const itemListDisabled = [
@@ -185,8 +236,7 @@ const PopoverDemo = () => {
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>基础用法</h2>
-
+        <h2>{translated.title}</h2>
         <Popover
           visible={basic}
           list={itemList}
@@ -203,11 +253,11 @@ const PopoverDemo = () => {
           }}
         >
           <Button type="primary" shape="square">
-            基础用法
+            {translated.title}
           </Button>
         </Popover>
 
-        <h2>选项配置</h2>
+        <h2>{translated.title1}</h2>
         <Popover
           visible={showIcon}
           location="bottom-start"
@@ -218,7 +268,7 @@ const PopoverDemo = () => {
           style={{ marginRight: '30px' }}
         >
           <Button type="primary" shape="square">
-            展示图标
+            {translated.showIcon}
           </Button>
         </Popover>
         <Popover
@@ -231,11 +281,11 @@ const PopoverDemo = () => {
           onSelect={chooseHandle}
         >
           <Button type="primary" shape="square">
-            禁用选项
+            {translated.disableAction}
           </Button>
         </Popover>
 
-        <h2>自定义内容</h2>
+        <h2>{translated.content}</h2>
         <Popover
           visible={customized}
           onClick={() => {
@@ -245,7 +295,7 @@ const PopoverDemo = () => {
           className="customClass"
         >
           <Button type="primary" shape="square">
-            自定义内容
+            {translated.content}
           </Button>
           {customized ? (
             <div className="self-content" style={selfContentStyle}>
@@ -271,10 +321,10 @@ const PopoverDemo = () => {
             ''
           )}
         </Popover>
-        <h2 className="demoClass">位置自定义</h2>
 
+        <h2 className="demoClass">{translated.title3}</h2>
         <Cell
-          title="点击查看更多方向"
+          title={translated.showMoreDirection}
           description={baseDesc}
           onClick={handlePicker}
         />
@@ -312,7 +362,7 @@ const PopoverDemo = () => {
           location={curPostion}
         />
 
-        <h2>自定义目标元素</h2>
+        <h2>{translated.title4}</h2>
         <Popover
           visible={customTarget}
           targetId="popid"
@@ -328,10 +378,10 @@ const PopoverDemo = () => {
           id="popid"
           onClick={clickCustomHandle}
         >
-          自定义目标元素
+          {translated.title4}
         </Button>
 
-        <h2>自定义颜色</h2>
+        <h2>{translated.contentColor}</h2>
         <Popover
           className="custom-color"
           visible={customColor}
@@ -342,7 +392,7 @@ const PopoverDemo = () => {
           }}
         >
           <Button type="primary" shape="square">
-            自定义颜色
+            {translated.contentColor}
           </Button>
         </Popover>
       </div>

src/packages/popover/demo.tsx

@@ -113,19 +113,24 @@ const PopoverDemo = () => {
     {
       key: 'key1',
       name: 'option1',
-      icon: (
-        <Home color="rgba(250, 44, 25, 1)" style={{ marginRight: '8px' }} />
-      ),
+      icon: <Home color="rgba(250, 44, 25, 1)" />,
+      action: {
+        icon: <Home />,
+        onClick: (e: any) => {
+          console.log('onclick 1')
+          e.stopPropagation()
+        },
+      },
     },
     {
       key: 'key2',
       name: 'option2',
-      icon: <Cart style={{ marginRight: '8px' }} />,
+      icon: <Cart />,
     },
     {
       key: 'key3',
       name: 'option3',
-      icon: <Location style={{ marginRight: '8px' }} />,
+      icon: <Location />,
     },
   ]
   const itemListDisabled = [

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

@@ -521,6 +521,7 @@ The List property is an array of objects, each object in the array is configured
 | icon | @nutui/icons-react name | `ReactNode` | `-` |
 | disabled | whether to disable | `boolean` | `false` |
 | className | Add additional class names for corresponding options | `string` | `-` |
+| action | Add additional actions for corresponding options | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` |
 
 ## Theming
 
@@ -531,12 +532,14 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Description | Default |
 | --- | --- | --- |
 | \--nutui-popover-border-radius | The rounded corner value of the border of the popover content area | `8px` |
-| \--nutui-popover-font-size | The font-size value of the popover content area | `14px` |
-| \--nutui-popover-menu-item-hover-background-color | The background color of the finger click menu option | `#fff` |
-| \--nutui-popover-menu-item-hover-text-color | Text color for finger click menu options | `#1a1a1a` |
-| \--nutui-popover-primary-text-color | Text color of options area | `#ffffff` |
-| \--nutui-popover-content-background-color | The background color of the options area | `#ffffff` |
-| \--nutui-popover-white-background-color | Arrow colors for top, bottom, left and right | `#ffffff` |
-| \--nutui-popover-border-bottom-color | The bottom border color of the options area | `rgba(229, 229, 229, 1)` |
-| \--nutui-popover-disable-color | Option Disabled Colors | `rgba(154, 155, 157, 1)` |
-| \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` |
+| \--nutui-popover-font-size | The font-size value of the popover content area | `12px` |
+| \--nutui-popover-text-color | Text color of options area | `$color-title` |
+| \--nutui-popover-content-background-color | The background color of the options area | `$white` |
+| \--nutui-popover-hover-background-color | The background color of the finger click menu option | `#fff` |
+| \--nutui-popover-hover-text-color | Text color for finger click menu options | `#1a1a1a` |
+| \--nutui-popover-border-color| Arrow colors for top, bottom, left and right | `$white` |
+| \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` |
+| \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disabled` |
+| \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` |
+
+

src/packages/popover/doc.md

@@ -528,6 +528,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | icon | 参考 Icon 组件 | `ReactNode` | `-` |
 | disabled | 是否为禁用状态 | `boolean` | `false` |
 | className | 为对应选项添加额外的类名 | `string` | `-` |
+| action | 为对应选项添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` |
 
 ## 主题定制
 
@@ -538,12 +539,12 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` |
-| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `14px` |
-| \--nutui-popover-menu-item-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` |
-| \--nutui-popover-menu-item-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` |
-| \--nutui-popover-primary-text-color | 选项区的文字颜色 | `#ffffff` |
-| \--nutui-popover-content-background-color | 选项区的背景颜色 | `#ffffff` |
-| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭头颜色 | `#ffffff` |
-| \--nutui-popover-border-bottom-color | 选项区的底部 border 颜色 | `rgba(229, 229, 229, 1)` |
-| \--nutui-popover-disable-color | 选项禁用的颜色 | `rgba(154, 155, 157, 1)` |
-| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` |
+| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` |
+| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` |
+| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` |
+| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` |
+| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` |
+| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色| `$white` |
+| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` |
+| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` |
+| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` |

src/packages/popover/doc.taro.md

@@ -527,6 +527,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | icon | 参考 Icon 组件 | `ReactNode` | `-` |
 | disabled | 是否为禁用状态 | `boolean` | `false` |
 | className | 为对应选项添加额外的类名 | `string` | `-` |
+| action | 为对应选项添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` |
 
 ## 主题定制
 
@@ -537,12 +538,12 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` |
-| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `14px` |
-| \--nutui-popover-menu-item-hover-background-color | 手指点击菜单选项的选中的背景颜色 | `#fff` |
-| \--nutui-popover-menu-item-hover-text-color | 手指点击菜单选项的选中的文字颜色 | `#1a1a1a` |
-| \--nutui-popover-primary-text-color | 选项区的文字颜色 | `#ffffff` |
-| \--nutui-popover-content-background-color | 选项区的背景颜色 | `#ffffff` |
-| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭头颜色 | `#ffffff` |
-| \--nutui-popover-border-bottom-color | 选项区的底部 border 颜色 | `rgba(229, 229, 229, 1)` |
-| \--nutui-popover-disable-color | 选项禁用的颜色 | `rgba(154, 155, 157, 1)` |
-| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` |
+| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` |
+| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` |
+| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` |
+| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` |
+| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` |
+| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色| `$white` |
+| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` |
+| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` |
+| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` |

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

@@ -528,6 +528,7 @@ List 屬性是一個由對象構成的數組，數組中的每個對象配置一
 | icon | 參考 Icon 組件 | `ReactNode` | `-` |
 | disabled | 是否為禁用狀態 | `boolean` | `false` |
 | className | 為對應選項添加額外的類名 | `string` | `-` |
+| action | 為對應選項添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` |
 
 ## 主題定製
 
@@ -538,12 +539,12 @@ List 屬性是一個由對象構成的數組，數組中的每個對象配置一
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-popover-border-radius | popover 內容區的 border 的圓角值 | `8px` |
-| \--nutui-popover-font-size | popover 內容區的 font-size 值 | `14px` |
-| \--nutui-popover-menu-item-hover-background-color | 手指點擊菜單選項選中的背景顏色 | `#fff` |
-| \--nutui-popover-menu-item-hover-text-color | 手指點擊菜單選項選中的文字顏色 | `#1a1a1a` |
-| \--nutui-popover-primary-text-color | 選項區的文字顏色 | `#ffffff` |
-| \--nutui-popover-content-background-color | 選項區的背景顏色 | `#ffffff` |
-| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭頭顏色 | `#ffffff` |
-| \--nutui-popover-border-bottom-color | 選項區的底部 border 顏色 | `rgba(229, 229, 229, 1)` |
-| \--nutui-popover-disable-color | 選項禁用的顏色 | `rgba(154, 155, 157, 1)` |
-| \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` |
+| \--nutui-popover-font-size | popover 內容區的 font-size 值 | `12px` |
+| \--nutui-popover-text-color | 選項區的文字顏色 | `$color-title` |
+| \--nutui-popover-content-background-color | 選項區的背景顏色 | `$white` |
+| \--nutui-popover-hover-background-color | 手指點擊菜單選項選中的背景顏色 | `#fff` |
+| \--nutui-popover-hover-text-color | 手指點擊菜單選項選中的文字顏色 | `#1a1a1a` |
+| \--nutui-popover-border-color | top、bottom、left 和 right 的箭頭顏色| `$white` |
+| \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` |
+| \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` |
+| \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` |