Merge pull request #1787 from XiaoMi/feature/#1786

feat: 1786
XiaoMi · Jun 18, 2021 · 237e9af · 237e9af
2 parents c9c9c91 + 461ce08
commit 237e9af
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - 新增 `Message` 组件 onClick、onClose方法[#1727](https://github.com/XiaoMi/hiui/issues/1727)
 - 新增 `From` 组件 setListItemFieldsValue 方法, 设置表单中From.List的指定项的值[#1760](https://github.com/XiaoMi/hiui/issues/1760)
 - 新增 `Table` 组件 onLoadChildren 方法, 树形表格下异步加载子数据 [#1725](https://github.com/XiaoMi/hiui/issues/1725)
+- 新增 `Badge` 组件 offset 属性设置状态点的位置偏移 [#1786](https://github.com/XiaoMi/hiui/issues/1786)
 - 优化 `Table` 组件树形表格，允许控制指定节点的展开收起 [#1784](https://github.com/XiaoMi/hiui/issues/1784)
 - 优化 `Grid` 组件接受原生属性 [#1609](https://github.com/XiaoMi/hiui/issues/1609)
 - 优化 `Select` onChang 回调方法中，获取全部选项详细内容 [#1726](https://github.com/XiaoMi/hiui/issues/1726)

diff --git a/components/badge/Badge.js b/components/badge/Badge.js
@@ -20,13 +20,14 @@ class Badge extends Component {
     visible: true
   }
 
-  render () {
-    const { content, prefixCls, max, type, visible, style } = this.props
+  render() {
+    const { content, prefixCls, max, type, visible, style, color, offset = [] } = this.props
+    const [left, top] = offset
     const badage =
       type === 'dot' ? (
-        <span className={`${prefixCls}-dot`} />
+        <span className={`${prefixCls}-dot`} style={{ backgroundColor: color, left, top }} />
       ) : (
-        <span className={`${prefixCls}-value`}>
+        <span className={`${prefixCls}-value`} style={{ backgroundColor: color, left, top }}>
           {typeof content === 'number' ? (content > max ? max + '+' : content) : content}
         </span>
       )

diff --git a/docs/zh-CN/components/badge.mdx b/docs/zh-CN/components/badge.mdx
@@ -29,3 +29,4 @@ import DemoNormal from '../../demo/badge/section-normal.jsx'
 | max     | 气泡显示的最大值，超过值用'+'号替代      | number           | -                 | 99       |
 | visible | 是否显示气泡                             | boolean          | true \| false     | true     |
 | color   | 气泡颜色                                 | string           | -                 | -        |
+| offset   | 设置状态点的位置偏移                                 | [left:number, top:number]           | -                 | -        |