refactor(badge): 支持禁用模式 (#3118)

irisSong · web-flow · commit 2e3c4900f7c2 · 2025-03-26T21:04:20.000+08:00
* refactor(badge): 支持禁用模式

* fix: cr修改
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
@@ -53,6 +53,10 @@
     z-index: 1;
   }
 
+  &-disabled {
+    background: $badge-background-disabled-color;
+  }
+
   &-number {
     font-family: 'JD';
   }
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
@@ -22,6 +22,7 @@ const defaultProps = {
   right: 0,
   fill: 'solid',
   size: 'large',
+  disabled: false,
 } as TaroBadgeProps
 export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
   const rtl = useRtl()
@@ -36,6 +37,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
     right,
     fill,
     size,
+    disabled,
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-badge'
@@ -73,6 +75,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
     [`${classPrefix}-content`]: children,
+    [`${classPrefix}-disabled`]: disabled,
   })
 
   useEffect(() => {
diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
@@ -13,6 +13,7 @@ const defaultProps = {
   right: 0,
   fill: 'solid',
   size: 'large',
+  disabled: false,
 } as WebBadgeProps
 
 export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
@@ -28,6 +29,7 @@ export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
     right,
     fill,
     size,
+    disabled,
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-badge'
@@ -62,6 +64,7 @@ export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
     [`${classPrefix}-content`]: children,
+    [`${classPrefix}-disabled`]: disabled,
   })
 
   const getPositionStyle = (): CSSProperties => ({
diff --git a/src/packages/badge/demo.taro.tsx b/src/packages/badge/demo.taro.tsx
@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const BadgeDemo = () => {
   const [translated] = useTranslate({
@@ -23,6 +24,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'zh-TW': {
       '8ab98966': '默认用法',
@@ -33,6 +35,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'en-US': {
       '8ab98966': 'Basic usage',
@@ -43,6 +46,7 @@ const BadgeDemo = () => {
       '915d7b01': 'Custom Position',
       f1089312: 'Display Alone',
       a8237653: 'Fill Mode',
+      disabled: 'Disabled',
     },
   })
   return (
@@ -53,6 +57,8 @@ const BadgeDemo = () => {
         <Demo1 />
         <View className="h2">{translated['1e7a2282']}</View>
         <Demo2 />
+        <View className="h2">{translated.disabled}</View>
+        <Demo9 />
         <View className="h2">{translated.customColor}</View>
         <Demo3 />
         <View className="h2">{translated['1c730245']}</View>
diff --git a/src/packages/badge/demo.tsx b/src/packages/badge/demo.tsx
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const BadgeDemo = () => {
   const [translated] = useTranslate({
@@ -20,6 +21,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'zh-TW': {
       '8ab98966': '默认用法',
@@ -30,6 +32,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'en-US': {
       '8ab98966': 'Basic usage',
@@ -40,6 +43,7 @@ const BadgeDemo = () => {
       '915d7b01': 'Custom Position',
       f1089312: 'Display Alone',
       a8237653: 'Fill Mode',
+      disabled: 'Disabled',
     },
   })
 
@@ -48,6 +52,8 @@ const BadgeDemo = () => {
       <div className="demo">
         <h2>{translated['8ab98966']}</h2>
         <Demo1 />
+        <h2>{translated.disabled}</h2>
+        <Demo9 />
         <h2>{translated['1e7a2282']}</h2>
         <Demo2 />
         <h2>{translated.customColor}</h2>
diff --git a/src/packages/badge/demos/h5/demo9.tsx b/src/packages/badge/demos/h5/demo9.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react'
+
+const Demo9 = () => {
+  return (
+    <Cell style={{ justifyContent: 'space-around' }}>
+      <Badge dot disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value={8} disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value="内容" disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+    </Cell>
+  )
+}
+export default Demo9
diff --git a/src/packages/badge/demos/taro/demo9.tsx b/src/packages/badge/demos/taro/demo9.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+
+const Demo9 = () => {
+  return (
+    <Cell style={{ justifyContent: 'space-around' }}>
+      <Badge dot disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value={8} disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value="内容" disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+    </Cell>
+  )
+}
+export default Demo9
diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### Disabled
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### Max Size
 
 :::demo
@@ -88,6 +96,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
 | right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
 | fill | Fill Mode | `solid` \| `outline` | `solid` |
+| disabled | Whether to disable | `boolean` | `false` |
 
 ## Theming
 
@@ -99,6 +108,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-badge-height | The height of the badge | `14px` |
 | \--nutui-badge-background-color | badge background color | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge disables background color | `$color-text-disabled` |
 | \--nutui-badge-color | badge content color value | `$color-primary-text)` |
 | \--nutui-badge-font-size | badge content font size | `$font-size-xxs` |
 | \--nutui-badge-border | badge border | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主题定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 内容色值 | `$color-primary-text` |
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react-taro'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react-taro'
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主题定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 内容色值 | `$color-primary-text` |
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主題定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 內容色值 | `$color-primary-text)` |
 | \--nutui-badge-font-size | badge 內容字號 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 邊框 | `1px solid $color-primary-text` |
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -244,6 +244,7 @@ plugins: [
 
 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效
 - 移除 `color`属性（`徽标背景颜色`），通过css变量`--nutui-badge-background-color`实现
+- 新增 `disabled` 属性，是否禁用
 
 [//]: # '#### CircleProgress'
 [//]: # '#### Collapse'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -247,6 +247,7 @@ plugins: [
 
 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效
 - 移除 `color`属性（`徽标背景颜色`），通过css变量`--nutui-badge-background-color`实现
+- 新增 `disabled` 属性，是否禁用
 
 [//]: # '#### CircleProgress'
 [//]: # '#### Collapse'
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
@@ -1603,6 +1603,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-danger
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
 $badge-border: var(--nutui-badge-border, 2px solid $badge-color) !default;
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
@@ -1628,6 +1628,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-danger
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
 $badge-border: var(--nutui-badge-border, 2px solid $badge-color) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1616,6 +1616,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-primary
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, $color-primary-text) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default;
 $badge-border: var(
diff --git a/src/types/spec/badge/base.ts b/src/types/spec/badge/base.ts
@@ -13,4 +13,5 @@ export interface BaseBadge extends BaseProps {
   right: SimpleValue
   fill: BadgeFill
   size: BadgeDotSize
+  disabled: boolean
 }

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,10 @@`
`53`	`53`	`z-index: 1;`
`54`	`54`	`}`
`55`	`55`
	`56`	`+ &-disabled {`
	`57`	`+ background: $badge-background-disabled-color;`
	`58`	`+ }`
	`59`	`+`
`56`	`60`	`&-number {`
`57`	`61`	`font-family: 'JD';`
`58`	`62`	`}`