refactor(button): can't be clicked in loading status (#1752)

* fix: Button can't be clicked when loading * docs: 增加 changelog * fix: 修改 changelog 格式 Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 12, 2021 · 577eda4 · 577eda4
1 parent 0c6718d
commit 577eda4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,8 @@
 
 ### Breaking Changes
 
+- `n-button` can no longer be clicked under `loading` status, closes [#1628](https://github.com/TuSimple/naive-ui/issues/1628).
+
 ### Fixes
 
 - Fix `n-alert`'s `header` slot unable to display normally.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,8 @@
 
 ### Breaking Changes
 
+- `b-button` 在 `loading` 状态不可再被点击，关闭 [#1628](https://github.com/TuSimple/naive-ui/issues/1628)
+
 ### Fixes
 
 - 修复 `n-alert` 的 `header` slot 无法正常显示

diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx
@@ -143,7 +143,7 @@ const Button = defineComponent({
       }
     }
     const handleClick = (e: MouseEvent): void => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.loading) {
         const { onClick } = props
         if (onClick) call(onClick, e)
         if (!props.text) {
@@ -509,6 +509,7 @@ const Button = defineComponent({
           !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`,
           this.color && `${mergedClsPrefix}-button--color`,
           this.secondary && `${mergedClsPrefix}-button--secondary`,
+          this.loading && `${mergedClsPrefix}-button--loading`,
           this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
         ]}
         tabindex={this.mergedFocusable ? 0 : -1}

diff --git a/src/button/src/styles/button.cssr.ts b/src/button/src/styles/button.cssr.ts
@@ -141,6 +141,9 @@ export default c([
         })
       ])
     ]),
+    cM('loading', {
+      'pointer-events': 'none'
+    }),
     cB('base-wave', `
       pointer-events: none;
       top: 0;