🐛[Popover]支持配置自定义图标和图标样式

Author: liyuan-meng

src/components/popover/demos/basic.md

@@ -48,6 +48,14 @@ export default function PopoverDemo() {
           <Button>文字 + Icon</Button>
         </Popover>
         {split}
+        <Popover
+          trigger={trigger}
+          content="这是一段文字描述"
+          iconStyle={{ color: '#e74949' }}
+          showIcon >
+          <Button>自定义图标</Button>
+        </Popover>
+        {split}
         <Popover
           trigger={trigger}
           size="small"

src/components/popover/demos/customIcon.md

@@ -0,0 +1,58 @@
+---
+order: 1
+title: Popover
+desc: 默认样式
+---
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { Button, Popover, Message, Checkbox } from 'cloud-react';
+
+export default function PopoverDemo() {
+	const [isClick, setIsClick] = useState(true);
+  const [trigger, setTrigger] = useState('hover');
+
+  useEffect(() => {
+      setTrigger(isClick ? 'click' : 'hover');
+  }, [isClick]);
+
+  const split = <p style={{ height: 10 }} />
+
+	return (
+      <div>
+        <Popover
+          trigger="click"
+          content="这是一段文字描述"
+          iconStyle={{ color: '#555BB3' }}
+          showIcon >
+          <Button>确认</Button>
+        </Popover>
+        {split}
+        <Popover
+          trigger="click"
+          content="这是一段文字描述"
+          iconStyle={{ color: '#fd830a' }}
+          showIcon >
+          <Button>提示</Button>
+        </Popover>
+        {split}
+        <Popover
+          trigger="click"
+          content="这是一段文字描述"
+          iconStyle={{ color: '#e74949' }}
+          showIcon >
+          <Button>高危提醒</Button>
+        </Popover>
+        {split}
+        <Popover
+          trigger="click"
+          content="这是一段文字描述"
+          iconType="shop-line"
+          iconStyle={{ color: 'rgba(0,0,0,.65)' }}
+          showIcon >
+          <Button>自定义图标</Button>
+        </Popover>
+      </div>
+	);
+}
+```

src/components/popover/index.js

@@ -19,6 +19,8 @@ function Popover(props) {
     content,
     showIcon,
     iconTpl,
+    iconType,
+    iconStyle,
     showCancelBtn,
     showConfirmBtn,
     cancelBtnText,
@@ -82,7 +84,7 @@ function Popover(props) {
         <section className={`${classSelector}-content`}>
           {showIcon
             && (iconTpl || (
-              <Icon className={`${classSelector}-icon`} type="info_1" />
+              <Icon className={`${classSelector}-icon`} style={iconStyle} type={iconType || 'info_1'} />
             ))}
 
           <div className={`${classSelector}-main-content`}>
@@ -165,6 +167,8 @@ Popover.propTypes = {
   content: PropTypes.any,
   showIcon: PropTypes.bool,
   iconTpl: PropTypes.any,
+  iconType: PropTypes.string,
+  iconStyle: PropTypes.object,
   showCancelBtn: PropTypes.bool,
   showConfirmBtn: PropTypes.bool,
   cancelBtnText: PropTypes.string,
@@ -184,6 +188,8 @@ Popover.defaultProps = {
   content: '',
   showIcon: false,
   iconTpl: '',
+  iconType: '',
+  iconStyle: {},
   showCancelBtn: false,
   showConfirmBtn: false,
   cancelBtnText: '取消',

src/components/popover/index.md

@@ -26,6 +26,8 @@ group:
 | content        | 内容     | string           | ''     |
 | showIcon       | 是否展示图标           | boolean           | false  |
 | iconTpl  | 自定义图标 | Element           | ''  |
+| iconType  | 自定义图标，可直接传入组件库的图标类型 | string           | ''  |
+| iconStyle  | 图标样式，配置 iconTpl 时，该值无效 | object           | {}  |
 | showCancelBtn          | 是否展示取消按钮     | boolean           | false     |
 | showConfirmBtn  | 是否展示确认按钮               | boolean            | false     |
 | cancelBtnText      | 取消按钮自定义文本      | string            | '取消'     |
@@ -41,6 +43,9 @@ group:
 ### 基础使用
 <embed src="@components/popover/demos/basic.md" /> 
 
+### 自定义图标
+<embed src="@components/popover/demos/customIcon.md" /> 
+
 ### 支持配置 Tooltip 参数，详细请参考 Tooltip 说明文档