[{"data":1,"prerenderedAt":588},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fcheckbox":3,"content-en-fallback-\u002Fcomponents\u002Fcheckbox":587},{"id":4,"title":5,"body":6,"description":578,"extension":579,"meta":580,"nav":581,"navigation":582,"path":583,"seo":584,"stem":585,"__hash__":586},"content\u002Fcomponents\u002Fcheckbox.md","Checkbox 复选框",{"type":7,"value":8,"toc":571},"minimark",[9,13,17,21,29,111,115,132,280,283,296,379,382,404,450,454,557,567],[10,11,5],"h1",{"id":12},"checkbox-复选框",[14,15,16],"p",{},"复选框允许用户在一组选项中选择一个或多个。样式还原 WinUI 3（Windows App SDK）的 CheckBox，交互底座复用 reka-ui。从「未勾选」进入「勾选 \u002F 不确定」时，字形自左向右缓动出现（对应 WinUI CheckGlyph 画入）；取消勾选时字形立即消失。",[18,19,20],"h2",{"id":20},"基础用法",[14,22,23,24,28],{},"使用 ",[25,26,27],"code",{},"v-model"," 双向绑定布尔值；默认勾选框在点击一次后切换。",[30,31,32,39],"demo-block",{"title":20},[33,34,36],"template",{"v-slot:preview":35},"",[37,38],"checkbox-basic-demo",{},[33,40,41],{"v-slot:code":35},[42,43,47],"pre",{"className":44,"code":45,"language":46,"meta":35,"style":35},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereCheckbox v-model=\"agree\">同意服务条款\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox v-model=\"subscribe\">订阅产品更新\u003C\u002FFluereCheckbox>\n","vue",[25,48,49,86],{"__ignoreMap":35},[50,51,54,58,62,66,69,73,76,78,81,83],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sVt8B","\u003C",[50,59,61],{"class":60},"s9eBZ","FluereCheckbox",[50,63,65],{"class":64},"sScJk"," v-model",[50,67,68],{"class":56},"=",[50,70,72],{"class":71},"sZZnC","\"",[50,74,75],{"class":56},"agree",[50,77,72],{"class":71},[50,79,80],{"class":56},">同意服务条款\u003C\u002F",[50,82,61],{"class":60},[50,84,85],{"class":56},">\n",[50,87,89,91,93,95,97,99,102,104,107,109],{"class":52,"line":88},2,[50,90,57],{"class":56},[50,92,61],{"class":60},[50,94,65],{"class":64},[50,96,68],{"class":56},[50,98,72],{"class":71},[50,100,101],{"class":56},"subscribe",[50,103,72],{"class":71},[50,105,106],{"class":56},">订阅产品更新\u003C\u002F",[50,108,61],{"class":60},[50,110,85],{"class":56},[18,112,114],{"id":113},"不确定三态","不确定（三态）",[14,116,117,120,121,124,125,124,128,131],{},[25,118,119],{},"modelValue"," 支持 ",[25,122,123],{},"true"," \u002F ",[25,126,127],{},"false",[25,129,130],{},"'indeterminate'","。不确定态渲染为横杠字形，再次点击进入勾选态。配合「全选」时先读取子项，再反写回各子项。",[30,133,135,140],{"title":134},"全选 · 不确定态",[33,136,137],{"v-slot:preview":35},[138,139],"checkbox-indeterminate-demo",{},[33,141,142],{"v-slot:code":35},[42,143,145],{"className":44,"code":144,"language":46,"meta":35,"style":35},"\u003CFluereCheckbox :model-value=\"allState\" @update:model-value=\"toggleAll\">\n  全选\n\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox v-model=\"a\">选项 A\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox v-model=\"b\">选项 B\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox v-model=\"c\">选项 C\u003C\u002FFluereCheckbox>\n",[25,146,147,190,195,205,230,255],{"__ignoreMap":35},[50,148,149,151,153,156,159,161,163,166,168,171,174,177,179,181,183,186,188],{"class":52,"line":53},[50,150,57],{"class":56},[50,152,61],{"class":60},[50,154,155],{"class":56}," :",[50,157,158],{"class":64},"model-value",[50,160,68],{"class":56},[50,162,72],{"class":71},[50,164,165],{"class":56},"allState",[50,167,72],{"class":71},[50,169,170],{"class":56}," @",[50,172,173],{"class":64},"update",[50,175,176],{"class":56},":",[50,178,158],{"class":64},[50,180,68],{"class":56},[50,182,72],{"class":71},[50,184,185],{"class":56},"toggleAll",[50,187,72],{"class":71},[50,189,85],{"class":56},[50,191,192],{"class":52,"line":88},[50,193,194],{"class":56},"  全选\n",[50,196,198,201,203],{"class":52,"line":197},3,[50,199,200],{"class":56},"\u003C\u002F",[50,202,61],{"class":60},[50,204,85],{"class":56},[50,206,208,210,212,214,216,218,221,223,226,228],{"class":52,"line":207},4,[50,209,57],{"class":56},[50,211,61],{"class":60},[50,213,65],{"class":64},[50,215,68],{"class":56},[50,217,72],{"class":71},[50,219,220],{"class":56},"a",[50,222,72],{"class":71},[50,224,225],{"class":56},">选项 A\u003C\u002F",[50,227,61],{"class":60},[50,229,85],{"class":56},[50,231,233,235,237,239,241,243,246,248,251,253],{"class":52,"line":232},5,[50,234,57],{"class":56},[50,236,61],{"class":60},[50,238,65],{"class":64},[50,240,68],{"class":56},[50,242,72],{"class":71},[50,244,245],{"class":56},"b",[50,247,72],{"class":71},[50,249,250],{"class":56},">选项 B\u003C\u002F",[50,252,61],{"class":60},[50,254,85],{"class":56},[50,256,258,260,262,264,266,268,271,273,276,278],{"class":52,"line":257},6,[50,259,57],{"class":56},[50,261,61],{"class":60},[50,263,65],{"class":64},[50,265,68],{"class":56},[50,267,72],{"class":71},[50,269,270],{"class":56},"c",[50,272,72],{"class":71},[50,274,275],{"class":56},">选项 C\u003C\u002F",[50,277,61],{"class":60},[50,279,85],{"class":56},[18,281,282],{"id":282},"禁用",[14,284,285,288,289,124,292,295],{},[25,286,287],{},"disabled"," 时不可交互，填充、描边、字形、文字落到禁用档（对应 WinUI ",[25,290,291],{},"ControlStrokeColorDisabled",[25,293,294],{},"AccentFillColorDisabled","）。",[30,297,299,304],{"title":298},"禁用状态",[33,300,301],{"v-slot:preview":35},[302,303],"checkbox-disabled-demo",{},[33,305,306],{"v-slot:code":35},[42,307,309],{"className":44,"code":308,"language":46,"meta":35,"style":35},"\u003CFluereCheckbox disabled>未勾选（禁用）\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox disabled :model-value=\"true\">已勾选（禁用）\u003C\u002FFluereCheckbox>\n\u003CFluereCheckbox disabled :model-value=\"'indeterminate'\">不确定（禁用）\u003C\u002FFluereCheckbox>\n",[25,310,311,327,355],{"__ignoreMap":35},[50,312,313,315,317,320,323,325],{"class":52,"line":53},[50,314,57],{"class":56},[50,316,61],{"class":60},[50,318,319],{"class":64}," disabled",[50,321,322],{"class":56},">未勾选（禁用）\u003C\u002F",[50,324,61],{"class":60},[50,326,85],{"class":56},[50,328,329,331,333,335,337,339,341,343,346,348,351,353],{"class":52,"line":88},[50,330,57],{"class":56},[50,332,61],{"class":60},[50,334,319],{"class":64},[50,336,155],{"class":56},[50,338,158],{"class":64},[50,340,68],{"class":56},[50,342,72],{"class":71},[50,344,123],{"class":345},"sj4cs",[50,347,72],{"class":71},[50,349,350],{"class":56},">已勾选（禁用）\u003C\u002F",[50,352,61],{"class":60},[50,354,85],{"class":56},[50,356,357,359,361,363,365,367,369,372,375,377],{"class":52,"line":197},[50,358,57],{"class":56},[50,360,61],{"class":60},[50,362,319],{"class":64},[50,364,155],{"class":56},[50,366,158],{"class":64},[50,368,68],{"class":56},[50,370,371],{"class":71},"\"'indeterminate'\"",[50,373,374],{"class":56},">不确定（禁用）\u003C\u002F",[50,376,61],{"class":60},[50,378,85],{"class":56},[18,380,381],{"id":381},"表单提交",[14,383,384,385,388,389,392,393,396,397,400,401,295],{},"位于 ",[25,386,387],{},"\u003Cform>"," 内并传 ",[25,390,391],{},"name"," 时，会自动补一个隐藏的原生 ",[25,394,395],{},"\u003Cinput type=\"checkbox\">","，勾选结果随表单提交（",[25,398,399],{},"value"," 作为提交值，默认 ",[25,402,403],{},"\"on\"",[30,405,406,410],{"title":381},[33,407,408],{"v-slot:preview":35},[37,409],{},[33,411,412],{"v-slot:code":35},[42,413,415],{"className":44,"code":414,"language":46,"meta":35,"style":35},"\u003Cform @submit.prevent>\n  \u003CFluereCheckbox name=\"opt-in\" value=\"yes\">同意接收邮件\u003C\u002FFluereCheckbox>\n\u003C\u002Fform>\n",[25,416,417,437,442],{"__ignoreMap":35},[50,418,419,421,424,426,429,432,435],{"class":52,"line":53},[50,420,57],{"class":56},[50,422,423],{"class":60},"form",[50,425,170],{"class":56},[50,427,428],{"class":64},"submit",[50,430,431],{"class":56},".",[50,433,434],{"class":64},"prevent",[50,436,85],{"class":56},[50,438,439],{"class":52,"line":88},[50,440,441],{"class":56},"  \u003CFluereCheckbox name=\"opt-in\" value=\"yes\">同意接收邮件\u003C\u002FFluereCheckbox>\n",[50,443,444,446,448],{"class":52,"line":197},[50,445,200],{"class":56},[50,447,423],{"class":60},[50,449,85],{"class":56},[18,451,453],{"id":452},"api","API",[455,456,457,476],"table",{},[458,459,460],"thead",{},[461,462,463,467,470,473],"tr",{},[464,465,466],"th",{},"属性（Props）",[464,468,469],{},"类型",[464,471,472],{},"默认",[464,474,475],{},"说明",[477,478,479,501,519,538],"tbody",{},[461,480,481,486,491,495],{},[482,483,484],"td",{},[25,485,119],{},[482,487,488],{},[25,489,490],{},"boolean | 'indeterminate' | null",[482,492,493],{},[25,494,127],{},[482,496,497,498,500],{},"勾选状态（",[25,499,27],{},"）",[461,502,503,507,512,516],{},[482,504,505],{},[25,506,287],{},[482,508,509],{},[25,510,511],{},"boolean",[482,513,514],{},[25,515,127],{},[482,517,518],{},"是否禁用",[461,520,521,525,530,535],{},[482,522,523],{},[25,524,391],{},[482,526,527],{},[25,528,529],{},"string",[482,531,532],{},[25,533,534],{},"—",[482,536,537],{},"表单提交名，配合隐藏原生 input",[461,539,540,544,549,554],{},[482,541,542],{},[25,543,399],{},[482,545,546],{},[25,547,548],{},"AcceptableValue",[482,550,551],{},[25,552,553],{},"'on'",[482,555,556],{},"勾选时提交给后端的值",[558,559,560],"blockquote",{},[14,561,562,563,566],{},"块（box）固定 20px（对应 WinUI ",[25,564,565],{},"CheckBoxSize = 20","），不随尺寸缩放。",[568,569,570],"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":35,"searchDepth":88,"depth":88,"links":572},[573,574,575,576,577],{"id":20,"depth":88,"text":20},{"id":113,"depth":88,"text":114},{"id":282,"depth":88,"text":282},{"id":381,"depth":88,"text":381},{"id":452,"depth":88,"text":453},"复选框组件，用于在若干项中选择一个或多个选项。","md",{},{"title":5},true,"\u002Fcomponents\u002Fcheckbox",{"title":5,"description":578},"components\u002Fcheckbox","AyVrYR9aRjKmF2pkAP87vxh7_hnce_HtBA5tChTUXow",null,1791802960540]