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 <07akioni2@gmail.com>

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.

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 无法正常显示

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}

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;