iter(g240): 按钮 loading 态，转圈禁点支持布尔与信号动态同步

2026-10-26 21:40:43 +08:00
parent 1ce98bdacd
commit 594051975b
8 changed files with 61 additions and 13 deletions
@@ -1,11 +1,22 @@
-import { h } from '@ui-arch/frame';
+import { effect, h, signal } from '@ui-arch/frame';
 import type { ButtonProps } from './types.js';

-/*** 按钮：variant 控制视觉强度，disabled 支持布尔或信号禁用，onClick 为点击回调 ***/
+/*** 按钮：variant 控制视觉强度，disabled / loading 支持布尔或信号动态同步（loading 转圈并禁点），onClick 为点击回调 ***/
 export function button(props: ButtonProps): HTMLElement {
-  return h(
+  const loading = typeof props.loading === 'function' ? props.loading : signal(!!props.loading); // 归一成信号：布尔也走同一响应式路径
+  const spin = h('span', { class: 'ua-spinner ua-btn-spin', 'aria-hidden': 'true' }); // 转圈指示：CSS 默认 display:none，加载态才显形
+  const el = h(
    'button',
-    { class: `ua-btn ua-btn-${props.variant ?? 'primary'}${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, type: props.type ?? 'button', disabled: props.disabled, onClick: props.onClick }, // 缺省 button：表单内不隐式提交
+    {
+      class: `ua-btn ua-btn-${props.variant ?? 'primary'}${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`,
+      type: props.type ?? 'button',
+      disabled: () => (typeof props.disabled === 'function' ? props.disabled() : !!props.disabled) || loading(), // 禁点口径：显式禁用或加载中
+      'aria-busy': () => (loading() ? 'true' : null), // 读屏播报忙碌态（null 移除属性）
+      onClick: props.onClick,
+    }, // 缺省 button：表单内不隐式提交
+    spin,
    props.label,
  );
+  effect(() => el.classList.toggle('is-loading', loading())); // 加载态只切类名，不整棵重渲染（保住焦点与子节点）
+  return el;
 }
@@ -26,6 +26,7 @@ export interface ButtonProps {
  variant?: 'primary' | 'ghost' | 'danger'; // 视觉强度；缺省 primary
  type?: 'button' | 'submit' | 'reset'; // 原生类型；缺省 button（表单内不会意外触发提交）
  disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
+  loading?: boolean | Signal<boolean>;  // 加载态：转圈并禁点（aria-busy）；布尔直接置位，传信号则动态同步
  onClick?: () => void; // 点击回调
 }

@@ -13,7 +13,7 @@
  "api": {
    "entry": "src/index.ts",
    "exports": [
-      "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交）",
+      "button(props)：按钮，variant 三档视觉强度，disabled / loading 支持布尔或信号动态同步（loading 转圈并禁点），onClick 点击回调",
      "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮，maxCount 设原生上限并实时显示字数",
      "inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节（长按连发步进），min/max/step 夹取，precision 小数位归一；prefix/suffix 可选渲染为整组前后附加块",
      "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限",
@@ -226,13 +226,19 @@
            "n": "size",
            "t": "'sm' | 'md' | 'lg'",
            "d": "高度档位：sm 紧凑 / md 默认 / lg 大触控目标，走 --ua-control-h-* 三档；缺省 md"
+          },
+          {
+            "n": "loading",
+            "t": "boolean | Signal<boolean>",
+            "df": "false",
+            "d": "加载态：转圈并禁点（aria-busy 播报忙碌）；布尔直接置位，传信号则动态同步"
          }
        ],
        "example": "button({ label: '提交', variant: 'primary', onClick: () => console.log('clicked') })",
        "steps": [
          "确定语义强度：主操作用 primary（默认），次要操作用 ghost，危险操作用 danger",
          "绑定 onClick 回调处理点击逻辑",
-          "需要禁用态时自行在回调首行卫语句判断，或外层包条件渲染",
+          "需要禁用态时传 disabled（布尔或信号）；异步提交用 loading：开始时置 true，完成后置 false，按钮转圈并自动禁点",
          "放进 <form> 里需要提交时显式传 type: \"submit\"；缺省 button 不会触发原生提交"
        ]
      },
@@ -5238,3 +5238,24 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
  color: inherit;
  font-weight: var(--ua-weight-medium);
 }
+
+/* ---- 按钮 loading 态：转圈 + 禁点 ---- */
+.ua-btn-spin {
+  display: none; /* 非加载态不占位：文案位置不漂移 */
+  border-width: 2px;
+}
+.ua-btn.is-loading {
+  cursor: progress; /* 光标改忙碌：点了也不会有下一步 */
+}
+.ua-btn.is-loading .ua-btn-spin {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: var(--ua-space-05);
+  vertical-align: -0.125em; /* 随文字基线微沉：转圈与文案居中对齐 */
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-btn.is-loading .ua-btn-spin {
+    animation: none; /* 降动效：转圈静态化为实色环 */
+  }
+}