[{"data":1,"prerenderedAt":1893},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fnumber-box":3,"content-en-fallback-\u002Fcomponents\u002Fnumber-box":1892},{"id":4,"title":5,"body":6,"description":1883,"extension":1884,"meta":1885,"nav":1886,"navigation":1887,"path":1888,"seo":1889,"stem":1890,"__hash__":1891},"content\u002Fcomponents\u002Fnumber-box.md","NumberBox 数字框",{"type":7,"value":8,"toc":1872},"minimark",[9,13,35,53,103,107,124,219,222,269,394,404,407,453,585,669,672,703,754,757,765,781,793,928,931,955,994,1089,1092,1183,1186,1205,1269,1273,1691,1741,1778,1868],[10,11,5],"h1",{"id":12},"numberbox-数字框",[14,15,16,17,21,22,30,31,34],"p",{},"数字框让用户输入与调整数字（数量、价格、税率、字号……）。样式与行为还原 WinUI 3（Windows App SDK）的 ",[18,19,20],"strong",{},"NumberBox","：它本质上是一个 ",[18,23,24,25,29],{},"TextBox + 数学解析 + ",[26,27,28],"code",{},"NaN"," 语义","，因此本组件内嵌 ",[26,32,33],{},"FluereInput","（与 WinUI 模板里内嵌 TextBox 一致），并把 WinUI 的取值口径、校验模式、增减按钮与内联表达式逐项落地。",[14,36,37,38,41,42,45,46,48,49,52],{},"取值遵循 WinUI 的 ",[18,39,40],{},"Value ↔ Text 双通道","：值变化时用格式化文本回写输入框；失焦或回车时解析文本再更新值。清空输入框会得到 ",[26,43,44],{},"null","（对应 WinUI 的 ",[26,47,28],{},"），此时显示 ",[26,50,51],{},"placeholder","。",[54,55,56],"blockquote",{},[14,57,58,59,62,63,66,67,70,71,74,75,78,79,82,83,74,86,74,89,74,92,95,96,74,99,102],{},"与 ",[26,60,61],{},"docs\u002Ftodo.md"," 原计划的差异：原本打算复用 reka-ui 的 ",[26,64,65],{},"NumberField","，但它的 ",[26,68,69],{},"NumberFieldInput"," 与 WinUI 有几处硬冲突 —— ",[26,72,73],{},"Home"," \u002F ",[26,76,77],{},"End"," 被映射成最小值 \u002F 最大值（WinUI 交给 TextBox 移动光标）、非法输入在失焦时把值清空（WinUI 保留原值）、方向键按步长吸附（WinUI 直接相加）、滚轮方向相反、",[26,80,81],{},"LargeChange"," 写死 10 步。这里保留「复用」的思路但改为自持实现：",[26,84,85],{},"format",[26,87,88],{},"parse",[26,90,91],{},"expression",[26,93,94],{},"step"," 四个纯函数层 + ",[26,97,98],{},"use-number-box",[26,100,101],{},"use-spin-repeat"," 两个 hook，可单独单测。",[104,105,106],"h2",{"id":106},"基础用法",[14,108,109,112,113,116,117,120,121,52],{},[26,110,111],{},"v-model"," 绑定数值，",[26,114,115],{},"header"," 是 WinUI 的标题行（同时作为缺省的可访问名），",[26,118,119],{},"description"," 渲染在控件下方并作为 ",[26,122,123],{},"aria-describedby",[125,126,127,134],"demo-block",{"title":106},[128,129,131],"template",{"v-slot:preview":130},"",[132,133],"number-box-basic-demo",{},[128,135,136],{"v-slot:code":130},[137,138,142],"pre",{"className":139,"code":140,"language":141,"meta":130,"style":130},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereNumberBox v-model=\"quantity\" header=\"数量\" \u002F>\n\u003CFluereNumberBox v-model=\"price\" header=\"单价\" description=\"支持小数\" \u002F>\n","vue",[26,143,144,184],{"__ignoreMap":130},[145,146,149,153,157,161,164,168,171,173,176,178,181],"span",{"class":147,"line":148},"line",1,[145,150,152],{"class":151},"sVt8B","\u003C",[145,154,156],{"class":155},"s9eBZ","FluereNumberBox",[145,158,160],{"class":159},"sScJk"," v-model",[145,162,163],{"class":151},"=",[145,165,167],{"class":166},"sZZnC","\"",[145,169,170],{"class":151},"quantity",[145,172,167],{"class":166},[145,174,175],{"class":159}," header",[145,177,163],{"class":151},[145,179,180],{"class":166},"\"数量\"",[145,182,183],{"class":151}," \u002F>\n",[145,185,187,189,191,193,195,197,200,202,204,206,209,212,214,217],{"class":147,"line":186},2,[145,188,152],{"class":151},[145,190,156],{"class":155},[145,192,160],{"class":159},[145,194,163],{"class":151},[145,196,167],{"class":166},[145,198,199],{"class":151},"price",[145,201,167],{"class":166},[145,203,175],{"class":159},[145,205,163],{"class":151},[145,207,208],{"class":166},"\"单价\"",[145,210,211],{"class":159}," description",[145,213,163],{"class":151},[145,215,216],{"class":166},"\"支持小数\"",[145,218,183],{"class":151},[104,220,221],{"id":221},"区间与步进",[14,223,224,74,227,230,231,74,234,237,238,74,241,244,245,247,248,251,252,247,255,257,258,74,261,264,265,268],{},[26,225,226],{},"min",[26,228,229],{},"max"," 对应 ",[26,232,233],{},"Minimum",[26,235,236],{},"Maximum","（缺省不设上下界，此时也不渲染 ",[26,239,240],{},"aria-valuemin",[26,242,243],{},"aria-valuemax","）；",[26,246,94],{}," 是 ",[26,249,250],{},"SmallChange","（方向键 \u002F 滚轮 \u002F 增减按钮），",[26,253,254],{},"largeStep",[26,256,81],{},"（",[26,259,260],{},"PageUp",[26,262,263],{},"PageDown","）。与 WinUI 一致：",[18,266,267],{},"不做步长吸附","，只在越界时钳制（或回绕）。",[125,270,271,276],{"title":221},[128,272,273],{"v-slot:preview":130},[274,275],"number-box-step-demo",{},[128,277,278],{"v-slot:code":130},[137,279,281],{"className":139,"code":280,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox\n  v-model=\"quantity\"\n  :min=\"0\"\n  :max=\"500\"\n  :step=\"10\"\n  :large-step=\"100\"\n  header=\"数量\"\n\u002F>\n\u003CFluereNumberBox v-model=\"ratio\" :min=\"0\" :max=\"1\" :step=\"0.1\" header=\"比例\" \u002F>\n",[26,282,283,290,304,322,338,354,371,382,388],{"__ignoreMap":130},[145,284,285,287],{"class":147,"line":148},[145,286,152],{"class":151},[145,288,289],{"class":155},"FluereNumberBox\n",[145,291,292,295,297,299,301],{"class":147,"line":186},[145,293,294],{"class":159},"  v-model",[145,296,163],{"class":151},[145,298,167],{"class":166},[145,300,170],{"class":151},[145,302,303],{"class":166},"\"\n",[145,305,307,310,312,314,316,320],{"class":147,"line":306},3,[145,308,309],{"class":151},"  :",[145,311,226],{"class":159},[145,313,163],{"class":151},[145,315,167],{"class":166},[145,317,319],{"class":318},"sj4cs","0",[145,321,303],{"class":166},[145,323,325,327,329,331,333,336],{"class":147,"line":324},4,[145,326,309],{"class":151},[145,328,229],{"class":159},[145,330,163],{"class":151},[145,332,167],{"class":166},[145,334,335],{"class":318},"500",[145,337,303],{"class":166},[145,339,341,343,345,347,349,352],{"class":147,"line":340},5,[145,342,309],{"class":151},[145,344,94],{"class":159},[145,346,163],{"class":151},[145,348,167],{"class":166},[145,350,351],{"class":318},"10",[145,353,303],{"class":166},[145,355,357,359,362,364,366,369],{"class":147,"line":356},6,[145,358,309],{"class":151},[145,360,361],{"class":159},"large-step",[145,363,163],{"class":151},[145,365,167],{"class":166},[145,367,368],{"class":318},"100",[145,370,303],{"class":166},[145,372,374,377,379],{"class":147,"line":373},7,[145,375,376],{"class":159},"  header",[145,378,163],{"class":151},[145,380,381],{"class":166},"\"数量\"\n",[145,383,385],{"class":147,"line":384},8,[145,386,387],{"class":151},"\u002F>\n",[145,389,391],{"class":147,"line":390},9,[145,392,393],{"class":151},"\u003CFluereNumberBox v-model=\"ratio\" :min=\"0\" :max=\"1\" :step=\"0.1\" header=\"比例\" \u002F>\n",[14,395,396,397,230,400,403],{},"传 ",[26,398,399],{},"wrap-enabled",[26,401,402],{},"IsWrapEnabled","：到端点后回绕到另一端，且两个按钮始终可用。",[104,405,406],{"id":406},"增减按钮",[14,408,409,230,412,415,416,419,420,423,424,427,428,430,431,434,435,74,438,441,442,445,446,74,449,452],{},[26,410,411],{},"spinButtonPlacementMode",[26,413,414],{},"SpinButtonPlacementMode","：",[26,417,418],{},"hidden","（默认）\u002F ",[26,421,422],{},"inline","（输入框右侧内联上 \u002F 下按钮）\u002F ",[26,425,426],{},"compact","（聚焦时浮出按钮面板）。",[26,429,422],{}," 与输入框共用一个 TextBox 边框，按钮 32×24、外边距 4、圆角 4；按住按钮会立即步进一次，随后每 250ms 重复（WinUI ",[26,432,433],{},"RepeatButton"," 的 ",[26,436,437],{},"Delay",[26,439,440],{},"Interval"," 缺省值）。按钮不进入 Tab 序列（WinUI ",[26,443,444],{},"IsTabStop=False","），但可用 ",[26,447,448],{},"Enter",[26,450,451],{},"Space"," 激活。",[125,454,456,461],{"title":455},"内联按钮",[128,457,458],{"v-slot:preview":130},[459,460],"number-box-inline-demo",{},[128,462,463],{"v-slot:code":130},[137,464,466],{"className":139,"code":465,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox\n  v-model=\"fontSize\"\n  :min=\"9\"\n  :max=\"72\"\n  spin-button-placement-mode=\"inline\"\n  header=\"字号\"\n\u002F>\n\u003CFluereNumberBox\n  v-model=\"zoom\"\n  :min=\"0.5\"\n  :max=\"3\"\n  :step=\"0.25\"\n  spin-button-placement-mode=\"inline\"\n  header=\"缩放\"\n\u002F>\n",[26,467,468,474,487,502,517,527,536,540,545,550,556,562,568,574,580],{"__ignoreMap":130},[145,469,470,472],{"class":147,"line":148},[145,471,152],{"class":151},[145,473,289],{"class":155},[145,475,476,478,480,482,485],{"class":147,"line":186},[145,477,294],{"class":159},[145,479,163],{"class":151},[145,481,167],{"class":166},[145,483,484],{"class":151},"fontSize",[145,486,303],{"class":166},[145,488,489,491,493,495,497,500],{"class":147,"line":306},[145,490,309],{"class":151},[145,492,226],{"class":159},[145,494,163],{"class":151},[145,496,167],{"class":166},[145,498,499],{"class":318},"9",[145,501,303],{"class":166},[145,503,504,506,508,510,512,515],{"class":147,"line":324},[145,505,309],{"class":151},[145,507,229],{"class":159},[145,509,163],{"class":151},[145,511,167],{"class":166},[145,513,514],{"class":318},"72",[145,516,303],{"class":166},[145,518,519,522,524],{"class":147,"line":340},[145,520,521],{"class":159},"  spin-button-placement-mode",[145,523,163],{"class":151},[145,525,526],{"class":166},"\"inline\"\n",[145,528,529,531,533],{"class":147,"line":356},[145,530,376],{"class":159},[145,532,163],{"class":151},[145,534,535],{"class":166},"\"字号\"\n",[145,537,538],{"class":147,"line":373},[145,539,387],{"class":151},[145,541,542],{"class":147,"line":384},[145,543,544],{"class":151},"\u003CFluereNumberBox\n",[145,546,547],{"class":147,"line":390},[145,548,549],{"class":151},"  v-model=\"zoom\"\n",[145,551,553],{"class":147,"line":552},10,[145,554,555],{"class":151},"  :min=\"0.5\"\n",[145,557,559],{"class":147,"line":558},11,[145,560,561],{"class":151},"  :max=\"3\"\n",[145,563,565],{"class":147,"line":564},12,[145,566,567],{"class":151},"  :step=\"0.25\"\n",[145,569,571],{"class":147,"line":570},13,[145,572,573],{"class":151},"  spin-button-placement-mode=\"inline\"\n",[145,575,577],{"class":147,"line":576},14,[145,578,579],{"class":151},"  header=\"缩放\"\n",[145,581,583],{"class":147,"line":582},15,[145,584,387],{"class":151},[125,586,588,593],{"title":587},"紧凑按钮",[128,589,590],{"v-slot:preview":130},[591,592],"number-box-compact-demo",{},[128,594,595],{"v-slot:code":130},[137,596,598],{"className":139,"code":597,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox\n  v-model=\"opacity\"\n  :min=\"0\"\n  :max=\"100\"\n  spin-button-placement-mode=\"compact\"\n  header=\"不透明度\"\n\u002F>\n",[26,599,600,606,619,633,647,656,665],{"__ignoreMap":130},[145,601,602,604],{"class":147,"line":148},[145,603,152],{"class":151},[145,605,289],{"class":155},[145,607,608,610,612,614,617],{"class":147,"line":186},[145,609,294],{"class":159},[145,611,163],{"class":151},[145,613,167],{"class":166},[145,615,616],{"class":151},"opacity",[145,618,303],{"class":166},[145,620,621,623,625,627,629,631],{"class":147,"line":306},[145,622,309],{"class":151},[145,624,226],{"class":159},[145,626,163],{"class":151},[145,628,167],{"class":166},[145,630,319],{"class":318},[145,632,303],{"class":166},[145,634,635,637,639,641,643,645],{"class":147,"line":324},[145,636,309],{"class":151},[145,638,229],{"class":159},[145,640,163],{"class":151},[145,642,167],{"class":166},[145,644,368],{"class":318},[145,646,303],{"class":166},[145,648,649,651,653],{"class":147,"line":340},[145,650,521],{"class":159},[145,652,163],{"class":151},[145,654,655],{"class":166},"\"compact\"\n",[145,657,658,660,662],{"class":147,"line":356},[145,659,376],{"class":159},[145,661,163],{"class":151},[145,663,664],{"class":166},"\"不透明度\"\n",[145,666,667],{"class":147,"line":373},[145,668,387],{"class":151},[104,670,671],{"id":671},"内联表达式",[14,673,674,230,677,680,681,684,685,688,689,692,693,688,696,692,699,702],{},[26,675,676],{},"accepts-expression",[26,678,679],{},"AcceptsExpression","：失焦或回车时求值 ",[26,682,683],{},"+ - * \u002F ^"," 与括号组成的表达式，优先级为 ",[26,686,687],{},"^"," > ",[26,690,691],{},"*"," ",[26,694,695],{},"\u002F",[26,697,698],{},"+",[26,700,701],{},"-","。求值后原始表达式不会被保留（会替换为结果）。",[125,704,705,710],{"title":671},[128,706,707],{"v-slot:preview":130},[708,709],"number-box-expression-demo",{},[128,711,712],{"v-slot:code":130},[137,713,715],{"className":139,"code":714,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox v-model=\"total\" accepts-expression placeholder=\"例如 (2+3)*4^2\" header=\"计算值\" \u002F>\n",[26,716,717],{"__ignoreMap":130},[145,718,719,721,723,725,727,729,732,734,737,740,742,745,747,749,752],{"class":147,"line":148},[145,720,152],{"class":151},[145,722,156],{"class":155},[145,724,160],{"class":159},[145,726,163],{"class":151},[145,728,167],{"class":166},[145,730,731],{"class":151},"total",[145,733,167],{"class":166},[145,735,736],{"class":159}," accepts-expression",[145,738,739],{"class":159}," placeholder",[145,741,163],{"class":151},[145,743,744],{"class":166},"\"例如 (2+3)*4^2\"",[145,746,175],{"class":159},[145,748,163],{"class":151},[145,750,751],{"class":166},"\"计算值\"",[145,753,183],{"class":151},[104,755,756],{"id":756},"校验模式",[14,758,759,230,762,415],{},[26,760,761],{},"validationMode",[26,763,764],{},"ValidationMode",[766,767,768,775],"ul",{},[769,770,771,774],"li",{},[26,772,773],{},"invalidInputOverwritten","（默认）：失焦 \u002F 回车时，非法输入被当前值的格式化文本覆盖，越界值钳制回区间；",[769,776,777,780],{},[26,778,779],{},"disabled","：保留用户输入与越界值，交给消费方自行校验。",[14,782,783,786,787,789,790,792],{},[26,784,785],{},"Escape"," 始终丢弃输入、回到当前值；",[26,788,448],{}," 结算输入（并吃掉按键，避免触发隐式表单提交，与 WinUI 处理 ",[26,791,448],{}," 的方式一致）。",[125,794,795,800],{"title":756},[128,796,797],{"v-slot:preview":130},[798,799],"number-box-validation-demo",{},[128,801,802],{"v-slot:code":130},[137,803,805],{"className":139,"code":804,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox v-model=\"strict\" :min=\"0\" :max=\"100\" header=\"默认：非法输入被覆盖\" \u002F>\n\u003CFluereNumberBox\n  v-model=\"lenient\"\n  :min=\"0\"\n  :max=\"100\"\n  validation-mode=\"disabled\"\n  header=\"保留输入\"\n\u002F>\n",[26,806,807,858,864,877,891,905,915,924],{"__ignoreMap":130},[145,808,809,811,813,815,817,819,822,824,827,829,831,833,835,837,839,841,843,845,847,849,851,853,856],{"class":147,"line":148},[145,810,152],{"class":151},[145,812,156],{"class":155},[145,814,160],{"class":159},[145,816,163],{"class":151},[145,818,167],{"class":166},[145,820,821],{"class":151},"strict",[145,823,167],{"class":166},[145,825,826],{"class":151}," :",[145,828,226],{"class":159},[145,830,163],{"class":151},[145,832,167],{"class":166},[145,834,319],{"class":318},[145,836,167],{"class":166},[145,838,826],{"class":151},[145,840,229],{"class":159},[145,842,163],{"class":151},[145,844,167],{"class":166},[145,846,368],{"class":318},[145,848,167],{"class":166},[145,850,175],{"class":159},[145,852,163],{"class":151},[145,854,855],{"class":166},"\"默认：非法输入被覆盖\"",[145,857,183],{"class":151},[145,859,860,862],{"class":147,"line":186},[145,861,152],{"class":151},[145,863,289],{"class":155},[145,865,866,868,870,872,875],{"class":147,"line":306},[145,867,294],{"class":159},[145,869,163],{"class":151},[145,871,167],{"class":166},[145,873,874],{"class":151},"lenient",[145,876,303],{"class":166},[145,878,879,881,883,885,887,889],{"class":147,"line":324},[145,880,309],{"class":151},[145,882,226],{"class":159},[145,884,163],{"class":151},[145,886,167],{"class":166},[145,888,319],{"class":318},[145,890,303],{"class":166},[145,892,893,895,897,899,901,903],{"class":147,"line":340},[145,894,309],{"class":151},[145,896,229],{"class":159},[145,898,163],{"class":151},[145,900,167],{"class":166},[145,902,368],{"class":318},[145,904,303],{"class":166},[145,906,907,910,912],{"class":147,"line":356},[145,908,909],{"class":159},"  validation-mode",[145,911,163],{"class":151},[145,913,914],{"class":166},"\"disabled\"\n",[145,916,917,919,921],{"class":147,"line":373},[145,918,376],{"class":159},[145,920,163],{"class":151},[145,922,923],{"class":166},"\"保留输入\"\n",[145,925,926],{"class":147,"line":384},[145,927,387],{"class":151},[104,929,930],{"id":930},"格式化与区域设置",[14,932,933,257,936,939,940,943,944,947,948,951,952,954],{},[26,934,935],{},"formatOptions",[26,937,938],{},"Intl.NumberFormatOptions","）对应 ",[26,941,942],{},"NumberFormatter","，",[26,945,946],{},"locale"," 决定小数点 \u002F 分组分隔符 \u002F 负号 —— ",[18,949,950],{},"显示与解析共用同一套符号","。SSR 应用建议显式传 ",[26,953,946],{},"：缺省时用运行环境的默认区域设置，而服务端与浏览器的默认值可能不同（例如 de-DE 的小数点），首帧会出现水合不一致。",[14,956,957,958,961,962,965,966,969,970,977,978,981,982,985,986,989,990,993],{},"WinUI 的默认 ",[26,959,960],{},"DecimalFormatter"," 被设成 ",[26,963,964],{},"IntegerDigits(1)"," + ",[26,967,968],{},"FractionDigits(0)","，在多个 WinAppSDK 版本上会把显示值四舍五入到整数（",[971,972,976],"a",{"href":973,"rel":974},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fissues\u002F8780",[975],"nofollow","microsoft\u002Fmicrosoft-ui-xaml#8780","：输入 25.8 失焦后显示 26）。Web 侧缺省不丢小数（",[26,979,980],{},"maximumFractionDigits: 20","），否则 ",[26,983,984],{},"step = 0.1"," 这类用法在显示层直接不可用；需要 WinUI 的整数观感时传 ",[26,987,988],{},":format-options=\"{ maximumFractionDigits: 0 }\""," 即可。显示前还会做一次 WinUI 的 10 位有效数字舍入，抹掉 ",[26,991,992],{},"0.1 + 0.2 = 0.30000000000000004"," 这类浮点噪声。",[125,995,996,1001],{"title":930},[128,997,998],{"v-slot:preview":130},[999,1000],"number-box-format-demo",{},[128,1002,1003],{"v-slot:code":130},[137,1004,1006],{"className":139,"code":1005,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox\n  v-model=\"integer\"\n  :format-options=\"{ maximumFractionDigits: 0 }\"\n  header=\"整数外观\"\n\u002F>\n\u003CFluereNumberBox\n  v-model=\"fixed\"\n  :format-options=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n  header=\"固定两位小数\"\n\u002F>\n\u003CFluereNumberBox v-model=\"german\" locale=\"de-DE\" header=\"de-DE：1.234,5\" \u002F>\n",[26,1007,1008,1014,1027,1048,1057,1061,1065,1070,1075,1080,1084],{"__ignoreMap":130},[145,1009,1010,1012],{"class":147,"line":148},[145,1011,152],{"class":151},[145,1013,289],{"class":155},[145,1015,1016,1018,1020,1022,1025],{"class":147,"line":186},[145,1017,294],{"class":159},[145,1019,163],{"class":151},[145,1021,167],{"class":166},[145,1023,1024],{"class":151},"integer",[145,1026,303],{"class":166},[145,1028,1029,1031,1034,1036,1038,1041,1043,1046],{"class":147,"line":306},[145,1030,309],{"class":151},[145,1032,1033],{"class":159},"format-options",[145,1035,163],{"class":151},[145,1037,167],{"class":166},[145,1039,1040],{"class":151},"{ maximumFractionDigits: ",[145,1042,319],{"class":318},[145,1044,1045],{"class":151}," }",[145,1047,303],{"class":166},[145,1049,1050,1052,1054],{"class":147,"line":324},[145,1051,376],{"class":159},[145,1053,163],{"class":151},[145,1055,1056],{"class":166},"\"整数外观\"\n",[145,1058,1059],{"class":147,"line":340},[145,1060,387],{"class":151},[145,1062,1063],{"class":147,"line":356},[145,1064,544],{"class":151},[145,1066,1067],{"class":147,"line":373},[145,1068,1069],{"class":151},"  v-model=\"fixed\"\n",[145,1071,1072],{"class":147,"line":384},[145,1073,1074],{"class":151},"  :format-options=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n",[145,1076,1077],{"class":147,"line":390},[145,1078,1079],{"class":151},"  header=\"固定两位小数\"\n",[145,1081,1082],{"class":147,"line":552},[145,1083,387],{"class":151},[145,1085,1086],{"class":147,"line":558},[145,1087,1088],{"class":151},"\u003CFluereNumberBox v-model=\"german\" locale=\"de-DE\" header=\"de-DE：1.234,5\" \u002F>\n",[104,1090,1091],{"id":1091},"禁用",[125,1093,1095,1100],{"title":1094},"禁用状态",[128,1096,1097],{"v-slot:preview":130},[1098,1099],"number-box-disabled-demo",{},[128,1101,1102],{"v-slot:code":130},[137,1103,1105],{"className":139,"code":1104,"language":141,"meta":130,"style":130},"\u003CFluereNumberBox\n  :model-value=\"35\"\n  :min=\"0\"\n  :max=\"100\"\n  disabled\n  spin-button-placement-mode=\"inline\"\n  header=\"禁用\"\n\u002F>\n",[26,1106,1107,1113,1129,1143,1157,1162,1170,1179],{"__ignoreMap":130},[145,1108,1109,1111],{"class":147,"line":148},[145,1110,152],{"class":151},[145,1112,289],{"class":155},[145,1114,1115,1117,1120,1122,1124,1127],{"class":147,"line":186},[145,1116,309],{"class":151},[145,1118,1119],{"class":159},"model-value",[145,1121,163],{"class":151},[145,1123,167],{"class":166},[145,1125,1126],{"class":318},"35",[145,1128,303],{"class":166},[145,1130,1131,1133,1135,1137,1139,1141],{"class":147,"line":306},[145,1132,309],{"class":151},[145,1134,226],{"class":159},[145,1136,163],{"class":151},[145,1138,167],{"class":166},[145,1140,319],{"class":318},[145,1142,303],{"class":166},[145,1144,1145,1147,1149,1151,1153,1155],{"class":147,"line":324},[145,1146,309],{"class":151},[145,1148,229],{"class":159},[145,1150,163],{"class":151},[145,1152,167],{"class":166},[145,1154,368],{"class":318},[145,1156,303],{"class":166},[145,1158,1159],{"class":147,"line":340},[145,1160,1161],{"class":159},"  disabled\n",[145,1163,1164,1166,1168],{"class":147,"line":356},[145,1165,521],{"class":159},[145,1167,163],{"class":151},[145,1169,526],{"class":166},[145,1171,1172,1174,1176],{"class":147,"line":373},[145,1173,376],{"class":159},[145,1175,163],{"class":151},[145,1177,1178],{"class":166},"\"禁用\"\n",[145,1180,1181],{"class":147,"line":384},[145,1182,387],{"class":151},[104,1184,1185],{"id":1185},"表单提交",[14,1187,1188,1189,1192,1193,1196,1197,1200,1201,1204],{},"位于 ",[26,1190,1191],{},"\u003Cform>"," 内并传 ",[26,1194,1195],{},"name"," 时，会补一个隐藏的原生 ",[26,1198,1199],{},"\u003Cinput type=\"hidden\">","，提交 ",[26,1202,1203],{},"name=value","（无值时提交空串）。",[125,1206,1207,1212],{"title":1185},[128,1208,1209],{"v-slot:preview":130},[1210,1211],"number-box-form-demo",{},[128,1213,1214],{"v-slot:code":130},[137,1215,1217],{"className":139,"code":1216,"language":141,"meta":130,"style":130},"\u003Cform @submit.prevent=\"onSubmit\">\n  \u003CFluereNumberBox v-model=\"amount\" name=\"amount\" :min=\"0\" :step=\"8\" spin-button-placement-mode=\"inline\" header=\"金额\" \u002F>\n  \u003CFluereButton type=\"submit\" appearance=\"primary\">提交\u003C\u002FFluereButton>\n\u003C\u002Fform>\n",[26,1218,1219,1250,1255,1260],{"__ignoreMap":130},[145,1220,1221,1223,1226,1229,1232,1235,1238,1240,1242,1245,1247],{"class":147,"line":148},[145,1222,152],{"class":151},[145,1224,1225],{"class":155},"form",[145,1227,1228],{"class":151}," @",[145,1230,1231],{"class":159},"submit",[145,1233,1234],{"class":151},".",[145,1236,1237],{"class":159},"prevent",[145,1239,163],{"class":151},[145,1241,167],{"class":166},[145,1243,1244],{"class":151},"onSubmit",[145,1246,167],{"class":166},[145,1248,1249],{"class":151},">\n",[145,1251,1252],{"class":147,"line":186},[145,1253,1254],{"class":151},"  \u003CFluereNumberBox v-model=\"amount\" name=\"amount\" :min=\"0\" :step=\"8\" spin-button-placement-mode=\"inline\" header=\"金额\" \u002F>\n",[145,1256,1257],{"class":147,"line":306},[145,1258,1259],{"class":151},"  \u003CFluereButton type=\"submit\" appearance=\"primary\">提交\u003C\u002FFluereButton>\n",[145,1261,1262,1265,1267],{"class":147,"line":324},[145,1263,1264],{"class":151},"\u003C\u002F",[145,1266,1225],{"class":155},[145,1268,1249],{"class":151},[104,1270,1272],{"id":1271},"api","API",[1274,1275,1276,1295],"table",{},[1277,1278,1279],"thead",{},[1280,1281,1282,1286,1289,1292],"tr",{},[1283,1284,1285],"th",{},"属性（Props）",[1283,1287,1288],{},"类型",[1283,1290,1291],{},"默认",[1283,1293,1294],{},"说明",[1296,1297,1298,1327,1345,1370,1390,1413,1432,1454,1474,1497,1518,1535,1552,1571,1592,1613,1633,1653,1672],"tbody",{},[1280,1299,1300,1306,1311,1316],{},[1301,1302,1303],"td",{},[26,1304,1305],{},"modelValue",[1301,1307,1308],{},[26,1309,1310],{},"number | null",[1301,1312,1313],{},[26,1314,1315],{},"—",[1301,1317,1318,1319,244,1321,1323,1324,1326],{},"当前值（",[26,1320,111],{},[26,1322,44],{}," 表示无值（WinUI 的 ",[26,1325,28],{},"）",[1280,1328,1329,1334,1338,1342],{},[1301,1330,1331],{},[26,1332,1333],{},"defaultValue",[1301,1335,1336],{},[26,1337,1310],{},[1301,1339,1340],{},[26,1341,44],{},[1301,1343,1344],{},"非受控初始值",[1280,1346,1347,1353,1358,1363],{},[1301,1348,1349,74,1351],{},[26,1350,226],{},[26,1352,229],{},[1301,1354,1355],{},[26,1356,1357],{},"number",[1301,1359,1360,1362],{},[26,1361,1315],{},"（不设界）",[1301,1364,1365,1366,74,1368,1326],{},"区间（WinUI ",[26,1367,233],{},[26,1369,236],{},[1280,1371,1372,1376,1380,1385],{},[1301,1373,1374],{},[26,1375,94],{},[1301,1377,1378],{},[26,1379,1357],{},[1301,1381,1382],{},[26,1383,1384],{},"1",[1301,1386,1387,1388,1326],{},"步长（WinUI ",[26,1389,250],{},[1280,1391,1392,1396,1400,1404],{},[1301,1393,1394],{},[26,1395,254],{},[1301,1397,1398],{},[26,1399,1357],{},[1301,1401,1402],{},[26,1403,351],{},[1301,1405,1406,1407,943,1409,74,1411,1326],{},"大步长（WinUI ",[26,1408,81],{},[26,1410,260],{},[26,1412,263],{},[1280,1414,1415,1419,1424,1429],{},[1301,1416,1417],{},[26,1418,779],{},[1301,1420,1421],{},[26,1422,1423],{},"boolean",[1301,1425,1426],{},[26,1427,1428],{},"false",[1301,1430,1431],{},"是否禁用",[1280,1433,1434,1438,1443,1447],{},[1301,1435,1436],{},[26,1437,115],{},[1301,1439,1440],{},[26,1441,1442],{},"string",[1301,1444,1445],{},[26,1446,1315],{},[1301,1448,1449,1450,1453],{},"顶部标题（WinUI ",[26,1451,1452],{},"Header","），同时是缺省可访问名",[1280,1455,1456,1461,1465,1469],{},[1301,1457,1458],{},[26,1459,1460],{},"label",[1301,1462,1463],{},[26,1464,1442],{},[1301,1466,1467],{},[26,1468,1315],{},[1301,1470,1471,1472,1326],{},"可访问名称（优先于 ",[26,1473,115],{},[1280,1475,1476,1480,1484,1488],{},[1301,1477,1478],{},[26,1479,119],{},[1301,1481,1482],{},[26,1483,1442],{},[1301,1485,1486],{},[26,1487,1315],{},[1301,1489,1490,1491,1494,1495],{},"控件下方说明（WinUI ",[26,1492,1493],{},"Description","），并作为 ",[26,1496,123],{},[1280,1498,1499,1503,1507,1511],{},[1301,1500,1501],{},[26,1502,51],{},[1301,1504,1505],{},[26,1506,1442],{},[1301,1508,1509],{},[26,1510,1315],{},[1301,1512,1513,1514,1517],{},"占位符（WinUI ",[26,1515,1516],{},"PlaceholderText","），仅无值时显示",[1280,1519,1520,1524,1528,1532],{},[1301,1521,1522],{},[26,1523,1195],{},[1301,1525,1526],{},[26,1527,1442],{},[1301,1529,1530],{},[26,1531,1315],{},[1301,1533,1534],{},"表单提交名，配合隐藏原生 input",[1280,1536,1537,1541,1545,1549],{},[1301,1538,1539],{},[26,1540,946],{},[1301,1542,1543],{},[26,1544,1442],{},[1301,1546,1547],{},[26,1548,1315],{},[1301,1550,1551],{},"BCP 47 语言标记，决定格式化与解析符号",[1280,1553,1554,1558,1562,1566],{},[1301,1555,1556],{},[26,1557,935],{},[1301,1559,1560],{},[26,1561,938],{},[1301,1563,1564],{},[26,1565,980],{},[1301,1567,1568,1569,1326],{},"数值格式（WinUI ",[26,1570,942],{},[1280,1572,1573,1577,1582,1587],{},[1301,1574,1575],{},[26,1576,411],{},[1301,1578,1579],{},[26,1580,1581],{},"'hidden' | 'compact' | 'inline'",[1301,1583,1584],{},[26,1585,1586],{},"'hidden'",[1301,1588,1589,1590,1326],{},"增减按钮呈现方式（WinUI ",[26,1591,414],{},[1280,1593,1594,1598,1603,1608],{},[1301,1595,1596],{},[26,1597,761],{},[1301,1599,1600],{},[26,1601,1602],{},"'invalidInputOverwritten' | 'disabled'",[1301,1604,1605],{},[26,1606,1607],{},"'invalidInputOverwritten'",[1301,1609,1610,1611,1326],{},"校验模式（WinUI ",[26,1612,764],{},[1280,1614,1615,1620,1624,1628],{},[1301,1616,1617],{},[26,1618,1619],{},"wrapEnabled",[1301,1621,1622],{},[26,1623,1423],{},[1301,1625,1626],{},[26,1627,1428],{},[1301,1629,1630,1631,1326],{},"到端点后回绕（WinUI ",[26,1632,402],{},[1280,1634,1635,1640,1644,1648],{},[1301,1636,1637],{},[26,1638,1639],{},"acceptsExpression",[1301,1641,1642],{},[26,1643,1423],{},[1301,1645,1646],{},[26,1647,1428],{},[1301,1649,1650,1651,1326],{},"是否解析内联表达式（WinUI ",[26,1652,679],{},[1280,1654,1655,1660,1664,1669],{},[1301,1656,1657],{},[26,1658,1659],{},"increaseLabel",[1301,1661,1662],{},[26,1663,1442],{},[1301,1665,1666],{},[26,1667,1668],{},"'Increase'",[1301,1670,1671],{},"加号按钮可访问名（WinUI 由资源本地化）",[1280,1673,1674,1679,1683,1688],{},[1301,1675,1676],{},[26,1677,1678],{},"decreaseLabel",[1301,1680,1681],{},[26,1682,1442],{},[1301,1684,1685],{},[26,1686,1687],{},"'Decrease'",[1301,1689,1690],{},"减号按钮可访问名",[1274,1692,1693,1705],{},[1277,1694,1695],{},[1280,1696,1697,1700,1703],{},[1283,1698,1699],{},"事件（Events）",[1283,1701,1702],{},"载荷",[1283,1704,1294],{},[1296,1706,1707,1723],{},[1280,1708,1709,1714,1718],{},[1301,1710,1711],{},[26,1712,1713],{},"update:modelValue",[1301,1715,1716],{},[26,1717,1310],{},[1301,1719,1720,1721,1326],{},"值变化（",[26,1722,111],{},[1280,1724,1725,1730,1735],{},[1301,1726,1727],{},[26,1728,1729],{},"valueChanged",[1301,1731,1732],{},[26,1733,1734],{},"{ oldValue: number | null, newValue: number | null }",[1301,1736,1737,1738,1326],{},"值变化（对应 WinUI ",[26,1739,1740],{},"ValueChanged",[1274,1742,1743,1752],{},[1277,1744,1745],{},[1280,1746,1747,1750],{},[1283,1748,1749],{},"插槽（Slots）",[1283,1751,1294],{},[1296,1753,1754,1768],{},[1280,1755,1756,1760],{},[1301,1757,1758],{},[26,1759,115],{},[1301,1761,1762,1763,74,1765,1326],{},"顶部标题行（WinUI ",[26,1764,1452],{},[26,1766,1767],{},"HeaderTemplate",[1280,1769,1770,1774],{},[1301,1771,1772],{},[26,1773,119],{},[1301,1775,1490,1776,1326],{},[26,1777,1493],{},[54,1779,1780,1812,1832,1842],{},[14,1781,1782,1783,1786,1787,1789,1790,74,1792,1794,1795,1789,1797,1799,1800,1802,1803,1806,1807,74,1809,1811],{},"键盘与指针口径对照 ",[26,1784,1785],{},"NumberBox.cpp","：方向键按 ",[26,1788,250],{},"、",[26,1791,260],{},[26,1793,263],{}," 按 ",[26,1796,81],{},[26,1798,448],{}," 结算、",[26,1801,785],{}," 回滚、获得焦点即全选文本；滚轮仅在输入框持有焦点时响应，向上滚为增（",[26,1804,1805],{},"MouseWheelDelta > 0","）。WinUI 把 ",[26,1808,73],{},[26,1810,77],{}," 留给 TextBox，本组件同样不把它们当作步进键。",[14,1813,1814,1815,1818,1819,74,1822,74,1824,1826,1827,74,1829,1831],{},"无障碍：输入框带 ",[26,1816,1817],{},"role=\"spinbutton\""," 与 ",[26,1820,1821],{},"aria-valuenow",[26,1823,240],{},[26,1825,243],{},"（未设置上下界时后两者不渲染，对应 WinUI 只在 ",[26,1828,233],{},[26,1830,236],{}," 被改写时才把它们拼进 UIA name 的口径）；增减按钮不进 Tab 序列但可键盘激活，并带可访问名。",[14,1833,1834,1835,965,1838,1841],{},"两处 Web 侧近似：紧凑浮层用 ",[26,1836,1837],{},"colorNeutralBackground1",[26,1839,1840],{},"shadow16"," 近似 WinUI 的 Acrylic 表面（Fluent 令牌集中没有材质令牌）；内联按钮出现时输入框右侧额外让出 84px，避免文本压到按钮上（WinUI 允许文本压在按钮下方）。",[14,1843,1844,1845,1848,1849,1851,1852,1855,1856,1858,1859,1818,1861,1864,1865,1867],{},"WinUI 的 ",[26,1846,1847],{},"Text"," 属性不作为独立 prop 暴露：Web 侧输入框文本由 ",[26,1850,111],{}," 加格式化派生（",[26,1853,1854],{},"Value → Text","），需要自定义文本展示时用 ",[26,1857,935],{},"；WinUI「同时设置 ",[26,1860,1847],{},[26,1862,1863],{},"Value"," 时以 ",[26,1866,1863],{}," 为准」的初始化顺序因此不适用。",[1869,1870,1871],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":130,"searchDepth":186,"depth":186,"links":1873},[1874,1875,1876,1877,1878,1879,1880,1881,1882],{"id":106,"depth":186,"text":106},{"id":221,"depth":186,"text":221},{"id":406,"depth":186,"text":406},{"id":671,"depth":186,"text":671},{"id":756,"depth":186,"text":756},{"id":930,"depth":186,"text":930},{"id":1091,"depth":186,"text":1091},{"id":1185,"depth":186,"text":1185},{"id":1271,"depth":186,"text":1272},"数字输入框，用于录入数字、校验区间与步进取值。","md",{},{"title":5},true,"\u002Fcomponents\u002Fnumber-box",{"title":5,"description":1883},"components\u002Fnumber-box","rT3zmHsHG2jnLQn-7ITY82ppXdtcasfR5jBRJ6u6OjU",null,1791802960540]