[{"data":1,"prerenderedAt":1136},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fselect":3,"content-en-fallback-\u002Fcomponents\u002Fselect":1135},{"id":4,"title":5,"body":6,"description":1126,"extension":1127,"meta":1128,"nav":1129,"navigation":1130,"path":1131,"seo":1132,"stem":1133,"__hash__":1134},"content\u002Fcomponents\u002Fselect.md","Select 下拉选择",{"type":7,"value":8,"toc":1115},"minimark",[9,13,34,39,42,131,134,159,238,241,253,337,340,359,507,510,565,568,712,716,722,1012,1074,1111],[10,11,5],"h1",{"id":12},"select-下拉选择",[14,15,16,20,21,25,26,29,30,33],"p",{},[17,18,19],"code",{},"FluereSelect"," 是",[22,23,24],"strong",{},"不可编辑","的下拉选择器：触发面只显示当前项文本（或占位符），点击展开面板、点选或键盘选一项。视觉还原 WinUI 3（Windows App SDK）的 ",[17,27,28],{},"ComboBox"," 非编辑形态，交互底座复用 reka-ui 的 ",[17,31,32],{},"Select","。",[35,36,38],"h2",{"id":37},"与-combobox-的差异","与 Combobox 的差异",[14,40,41],{},"两者长得像，但职责不同——选错会把「可输入 + 可搜索」的能力白送出去：",[43,44,45,64],"table",{},[46,47,48],"thead",{},[49,50,51,55,59],"tr",{},[52,53,54],"th",{},"维度",[52,56,57],{},[17,58,19],{},[52,60,61],{},[17,62,63],{},"FluereCombobox",[65,66,67,86,103,120],"tbody",{},[49,68,69,73,79],{},[70,71,72],"td",{},"触发面",[70,74,75,76],{},"只有文本 + 箭头，",[22,77,78],{},"不可输入",[70,80,81,82,85],{},"可选可编辑输入框（",[17,83,84],{},"editable","）",[49,87,88,91,97],{},[70,89,90],{},"文本搜索",[70,92,93,96],{},[22,94,95],{},"无","（仅有底座按字符跳转）",[70,98,99,100,85],{},"有（",[17,101,102],{},"textSearchEnabled",[49,104,105,108,114],{},[70,106,107],{},"事件",[70,109,110,113],{},[17,111,112],{},"change","（单项）",[70,115,116,119],{},[17,117,118],{},"selectionChanged","（added \u002F removed）",[49,121,122,125,128],{},[70,123,124],{},"适用场景",[70,126,127],{},"取值固定的枚举项",[70,129,130],{},"需要输入过滤 \u002F 自由文本的场景",[35,132,133],{"id":133},"基础用法",[14,135,136,139,140,143,144,147,148,151,152,151,155,158],{},[17,137,138],{},"v-model"," 绑定选中值；未选中时显示 ",[17,141,142],{},"placeholder","。选项用 ",[17,145,146],{},"items"," 传（",[17,149,150],{},"value"," \u002F ",[17,153,154],{},"text",[17,156,157],{},"disabled","）。",[160,161,162,169],"demo-block",{"title":133},[163,164,166],"template",{"v-slot:preview":165},"",[167,168],"select-basic-demo",{},[163,170,171],{"v-slot:code":165},[172,173,177],"pre",{"className":174,"code":175,"language":176,"meta":165,"style":165},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereSelect v-model=\"value\" :items=\"items\" header=\"刷新频率\" placeholder=\"请选择\" \u002F>\n","vue",[17,178,179],{"__ignoreMap":165},[180,181,184,188,191,195,198,202,204,206,209,211,213,215,217,219,222,224,227,230,232,235],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"sVt8B","\u003C",[180,189,19],{"class":190},"s9eBZ",[180,192,194],{"class":193},"sScJk"," v-model",[180,196,197],{"class":186},"=",[180,199,201],{"class":200},"sZZnC","\"",[180,203,150],{"class":186},[180,205,201],{"class":200},[180,207,208],{"class":186}," :",[180,210,146],{"class":193},[180,212,197],{"class":186},[180,214,201],{"class":200},[180,216,146],{"class":186},[180,218,201],{"class":200},[180,220,221],{"class":193}," header",[180,223,197],{"class":186},[180,225,226],{"class":200},"\"刷新频率\"",[180,228,229],{"class":193}," placeholder",[180,231,197],{"class":186},[180,233,234],{"class":200},"\"请选择\"",[180,236,237],{"class":186}," \u002F>\n",[35,239,240],{"id":240},"受控与清空",[14,242,243,246,247,250,251,33],{},[17,244,245],{},"modelValue"," 是唯一事实源；把它设为 ",[17,248,249],{},"null"," 即可回到占位符。每次选中都会抛 ",[17,252,112],{},[160,254,256,261],{"title":255},"受控 + change + 清空",[163,257,258],{"v-slot:preview":165},[259,260],"select-controlled-demo",{},[163,262,263],{"v-slot:code":165},[172,264,266],{"className":174,"code":265,"language":176,"meta":165,"style":165},"\u003CFluereSelect v-model=\"value\" :items=\"items\" @change=\"(args) => (last = args.value)\" \u002F>\n\u003CFluereButton size=\"small\" @click=\"value = null\">清空选择\u003C\u002FFluereButton>\n",[17,267,268,331],{"__ignoreMap":165},[180,269,270,272,274,276,278,280,282,284,286,288,290,292,294,296,299,301,303,305,308,312,315,319,322,324,327,329],{"class":182,"line":183},[180,271,187],{"class":186},[180,273,19],{"class":190},[180,275,194],{"class":193},[180,277,197],{"class":186},[180,279,201],{"class":200},[180,281,150],{"class":186},[180,283,201],{"class":200},[180,285,208],{"class":186},[180,287,146],{"class":193},[180,289,197],{"class":186},[180,291,201],{"class":200},[180,293,146],{"class":186},[180,295,201],{"class":200},[180,297,298],{"class":186}," @",[180,300,112],{"class":193},[180,302,197],{"class":186},[180,304,201],{"class":200},[180,306,307],{"class":186},"(",[180,309,311],{"class":310},"s4XuR","args",[180,313,314],{"class":186},") ",[180,316,318],{"class":317},"szBVR","=>",[180,320,321],{"class":186}," (last ",[180,323,197],{"class":317},[180,325,326],{"class":186}," args.value)",[180,328,201],{"class":200},[180,330,237],{"class":186},[180,332,334],{"class":182,"line":333},2,[180,335,336],{"class":186},"\u003CFluereButton size=\"small\" @click=\"value = null\">清空选择\u003C\u002FFluereButton>\n",[35,338,339],{"id":339},"状态与空列表",[14,341,342,151,345,348,349,351,352,354,355,358],{},[17,343,344],{},"header",[17,346,347],{},"description"," 与触发面按 id 关联；禁用项键盘会跳过；整组 ",[17,350,157],{}," 时不展开；",[17,353,146],{}," 为空时用 ",[17,356,357],{},"#empty"," 给空态文案。",[160,360,362,367],{"title":361},"标题 \u002F 说明 \u002F 禁用 \u002F 空列表",[163,363,364],{"v-slot:preview":165},[365,366],"select-states-demo",{},[163,368,369],{"v-slot:code":165},[172,370,372],{"className":174,"code":371,"language":176,"meta":165,"style":165},"\u003CFluereSelect v-model=\"v\" :items=\"items\" header=\"同步速度\" description=\"含一个不可选项。\" \u002F>\n\u003CFluereSelect v-model=\"v2\" :items=\"items\" disabled header=\"整组禁用\" \u002F>\n\u003CFluereSelect :items=\"[]\" header=\"空列表\">\n  \u003Ctemplate #empty>没有可选项\u003C\u002Ftemplate>\n\u003C\u002FFluereSelect>\n",[17,373,374,420,461,491,497],{"__ignoreMap":165},[180,375,376,378,380,382,384,386,389,391,393,395,397,399,401,403,405,407,410,413,415,418],{"class":182,"line":183},[180,377,187],{"class":186},[180,379,19],{"class":190},[180,381,194],{"class":193},[180,383,197],{"class":186},[180,385,201],{"class":200},[180,387,388],{"class":186},"v",[180,390,201],{"class":200},[180,392,208],{"class":186},[180,394,146],{"class":193},[180,396,197],{"class":186},[180,398,201],{"class":200},[180,400,146],{"class":186},[180,402,201],{"class":200},[180,404,221],{"class":193},[180,406,197],{"class":186},[180,408,409],{"class":200},"\"同步速度\"",[180,411,412],{"class":193}," description",[180,414,197],{"class":186},[180,416,417],{"class":200},"\"含一个不可选项。\"",[180,419,237],{"class":186},[180,421,422,424,426,428,430,432,435,437,439,441,443,445,447,449,452,454,456,459],{"class":182,"line":333},[180,423,187],{"class":186},[180,425,19],{"class":190},[180,427,194],{"class":193},[180,429,197],{"class":186},[180,431,201],{"class":200},[180,433,434],{"class":186},"v2",[180,436,201],{"class":200},[180,438,208],{"class":186},[180,440,146],{"class":193},[180,442,197],{"class":186},[180,444,201],{"class":200},[180,446,146],{"class":186},[180,448,201],{"class":200},[180,450,451],{"class":193}," disabled",[180,453,221],{"class":193},[180,455,197],{"class":186},[180,457,458],{"class":200},"\"整组禁用\"",[180,460,237],{"class":186},[180,462,464,466,468,470,472,474,476,479,481,483,485,488],{"class":182,"line":463},3,[180,465,187],{"class":186},[180,467,19],{"class":190},[180,469,208],{"class":186},[180,471,146],{"class":193},[180,473,197],{"class":186},[180,475,201],{"class":200},[180,477,478],{"class":186},"[]",[180,480,201],{"class":200},[180,482,221],{"class":193},[180,484,197],{"class":186},[180,486,487],{"class":200},"\"空列表\"",[180,489,490],{"class":186},">\n",[180,492,494],{"class":182,"line":493},4,[180,495,496],{"class":186},"  \u003Ctemplate #empty>没有可选项\u003C\u002Ftemplate>\n",[180,498,500,503,505],{"class":182,"line":499},5,[180,501,502],{"class":186},"\u003C\u002F",[180,504,19],{"class":190},[180,506,490],{"class":186},[35,508,509],{"id":509},"规格来源",[43,511,512,522],{},[46,513,514],{},[49,515,516,519],{},[52,517,518],{},"项",[52,520,521],{},"值",[65,523,524,542,555],{},[49,525,526,529],{},[70,527,528],{},"控件",[70,530,531,532,534,535,538,539,541],{},"WinUI 3 ",[17,533,28],{},"（",[22,536,537],{},"非编辑形态","；WinUI 没有名为 ",[17,540,32],{}," 的控件）",[49,543,544,547],{},[70,545,546],{},"tag\u002Fcommit",[70,548,549,151,552],{},[17,550,551],{},"winui3\u002Frelease\u002F2.5.1",[17,553,554],{},"ba3a8d5",[49,556,557,560],{},[70,558,559],{},"关键文件",[70,561,562],{},[17,563,564],{},"src\u002Fcontrols\u002Fdev\u002FComboBox\u002FComboBox_themeresources.xaml",[35,566,567],{"id":567},"实现要点",[569,570,571,615,640,659,676,694],"ul",{},[572,573,574,576,577,580,581,584,585,151,588,151,591,151,594,597,598,584,601,604,605,584,608,611,612,614],"li",{},[22,575,72],{},"：",[17,578,579],{},"ComboBoxBackground*"," ← ",[17,582,583],{},"ControlFillColor*"," → ",[17,586,587],{},"--colorNeutralBackground1",[17,589,590],{},"…Hover",[17,592,593],{},"…Pressed",[17,595,596],{},"…Disabled","；四边 ",[17,599,600],{},"ControlElevationBorderBrush",[17,602,603],{},"--colorNeutralStrokeAlpha","、底边 ",[17,606,607],{},"ControlStrokeColorDefault",[17,609,610],{},"--colorNeutralStroke1","（与本库 ",[17,613,63],{}," 非编辑形态同一套口径，避免同页两种下拉视觉漂移）。",[572,616,617,576,620,580,623,584,626,151,629,151,631,151,633,636,637,33],{},[22,618,619],{},"下拉项",[17,621,622],{},"ComboBoxItemBackground*",[17,624,625],{},"SubtleFillColor*",[17,627,628],{},"--colorSubtleBackground",[17,630,590],{},[17,632,593],{},[17,634,635],{},"…Selected","；选中项左侧 3px 指示条用 ",[17,638,639],{},"--colorCompoundBrandBackground",[572,641,642,645,646,649,650,652,653,656,657,33],{},[22,643,644],{},"下拉面","：圆角 ",[17,647,648],{},"--borderRadiusXLarge","（OverlayCornerRadius）、描边 ",[17,651,610],{},"、",[17,654,655],{},"--shadow16","（elevation 16）、底色 ",[17,658,587],{},[572,660,661,664,665,534,668,671,672,675],{},[22,662,663],{},"层级与焦点","：下拉走 0.4.1 的 ",[17,666,667],{},"useFlyout",[17,669,670],{},"--zIndexNavFlyout"," + 嵌套提升），触发面走 0.4.3 的 ",[17,673,674],{},"useFocusVisual","（双层焦点矩形）。",[572,677,678,681,682,685,686,689,690,693],{},[22,679,680],{},"面板样式必须写在非 scoped 块","：reka 的 ",[17,683,684],{},"SelectContent"," 把 class 落在 Teleport 到 body 的元素上，拿不到本组件的 ",[17,687,688],{},"data-v-*","——scoped 选择器会静默失效（jsdom 不解析 ",[17,691,692],{},"var()","，单测发现不了）。",[572,695,696,699,700,703,704,707,708,711],{},[22,697,698],{},"已知缺口","：高对比度未实现；不实现 WinUI 的 ",[17,701,702],{},"IsTextSearchEnabled"," 前缀匹配（底座按字符跳转不算搜索）；",[17,705,706],{},"size"," 档位与 WinUI 的 ",[17,709,710],{},"Compact"," 样式未做。",[35,713,715],{"id":714},"api","API",[717,718,720],"h3",{"id":719},"fluereselect",[17,721,19],{},[43,723,724,740],{},[46,725,726],{},[49,727,728,731,734,737],{},[52,729,730],{},"属性（Props）",[52,732,733],{},"类型",[52,735,736],{},"默认",[52,738,739],{},"对应 \u002F 说明",[65,741,742,767,785,812,834,853,872,891,906,924,939,955,972,989],{},[49,743,744,748,753,758],{},[70,745,746],{},[17,747,245],{},[70,749,750],{},[17,751,752],{},"T | null",[70,754,755],{},[17,756,757],{},"undefined",[70,759,760,761,763,764,766],{},"受控选中值（",[17,762,138],{},"）；",[17,765,757],{}," 为非受控",[49,768,769,774,778,782],{},[70,770,771],{},[17,772,773],{},"defaultValue",[70,775,776],{},[17,777,752],{},[70,779,780],{},[17,781,249],{},[70,783,784],{},"非受控初始值",[49,786,787,791,796,800],{},[70,788,789],{},[17,790,146],{},[70,792,793],{},[17,794,795],{},"FluereSelectItem\u003CT>[]",[70,797,798],{},[17,799,478],{},[70,801,802,805,806,151,808,151,810],{},[17,803,804],{},"ItemsSource","；每项 ",[17,807,150],{},[17,809,154],{},[17,811,157],{},[49,813,814,819,824,828],{},[70,815,816],{},[17,817,818],{},"open",[70,820,821],{},[17,822,823],{},"boolean",[70,825,826],{},[17,827,757],{},[70,829,830,833],{},[17,831,832],{},"v-model:open","；不传则内部自管",[49,835,836,841,845,850],{},[70,837,838],{},[17,839,840],{},"defaultOpen",[70,842,843],{},[17,844,823],{},[70,846,847],{},[17,848,849],{},"false",[70,851,852],{},"非受控初始展开状态",[49,854,855,859,863,867],{},[70,856,857],{},[17,858,157],{},[70,860,861],{},[17,862,823],{},[70,864,865],{},[17,866,849],{},[70,868,869],{},[17,870,871],{},"IsEnabled",[49,873,874,878,883,886],{},[70,875,876],{},[17,877,142],{},[70,879,880],{},[17,881,882],{},"string",[70,884,885],{},"—",[70,887,888],{},[17,889,890],{},"PlaceholderText",[49,892,893,897,901,903],{},[70,894,895],{},[17,896,344],{},[70,898,899],{},[17,900,882],{},[70,902,885],{},[70,904,905],{},"触发面上方标题；同时作为可访问名",[49,907,908,913,917,919],{},[70,909,910],{},[17,911,912],{},"label",[70,914,915],{},[17,916,882],{},[70,918,885],{},[70,920,921,922,85],{},"显式可访问名（优先于 ",[17,923,344],{},[49,925,926,930,934,936],{},[70,927,928],{},[17,929,347],{},[70,931,932],{},[17,933,882],{},[70,935,885],{},[70,937,938],{},"触发面下方说明",[49,940,941,946,950,952],{},[70,942,943],{},[17,944,945],{},"name",[70,947,948],{},[17,949,882],{},[70,951,885],{},[70,953,954],{},"透传隐藏 input 的字段名",[49,956,957,962,967,969],{},[70,958,959],{},[17,960,961],{},"by",[70,963,964],{},[17,965,966],{},"string | ((a, b) => boolean)",[70,968,885],{},[70,970,971],{},"自定义值相等判断（对象型选项必传）",[49,973,974,979,984,986],{},[70,975,976],{},[17,977,978],{},"dir",[70,980,981],{},[17,982,983],{},"Direction",[70,985,885],{},[70,987,988],{},"文本方向",[49,990,991,996,1001,1006],{},[70,992,993],{},[17,994,995],{},"maxDropDownHeight",[70,997,998],{},[17,999,1000],{},"number",[70,1002,1003],{},[17,1004,1005],{},"504",[70,1007,1008,1011],{},[17,1009,1010],{},"MaxDropDownHeight","（px）",[43,1013,1014,1026],{},[46,1015,1016],{},[49,1017,1018,1021,1024],{},[52,1019,1020],{},"事件（Emits）",[52,1022,1023],{},"载荷",[52,1025,739],{},[65,1027,1028,1044,1060],{},[49,1029,1030,1035,1039],{},[70,1031,1032],{},[17,1033,1034],{},"update:modelValue",[70,1036,1037],{},[17,1038,752],{},[70,1040,1041,1042,85],{},"受控回写（",[17,1043,138],{},[49,1045,1046,1051,1055],{},[70,1047,1048],{},[17,1049,1050],{},"update:open",[70,1052,1053],{},[17,1054,823],{},[70,1056,1057,1058,85],{},"展开状态回写（",[17,1059,832],{},[49,1061,1062,1066,1071],{},[70,1063,1064],{},[17,1065,112],{},[70,1067,1068],{},[17,1069,1070],{},"{ value: T | null }",[70,1072,1073],{},"选中项变化",[43,1075,1076,1086],{},[46,1077,1078],{},[49,1079,1080,1083],{},[52,1081,1082],{},"插槽（Slots）",[52,1084,1085],{},"说明",[65,1087,1088,1101],{},[49,1089,1090,1095],{},[70,1091,1092],{},[17,1093,1094],{},"item",[70,1096,1097,1098],{},"自定义项渲染，作用域参数 ",[17,1099,1100],{},"{ item, selected }",[49,1102,1103,1108],{},[70,1104,1105],{},[17,1106,1107],{},"empty",[70,1109,1110],{},"空列表文案（组件库不新增内建文案）",[1112,1113,1114],"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":165,"searchDepth":333,"depth":333,"links":1116},[1117,1118,1119,1120,1121,1122,1123],{"id":37,"depth":333,"text":38},{"id":133,"depth":333,"text":133},{"id":240,"depth":333,"text":240},{"id":339,"depth":333,"text":339},{"id":509,"depth":333,"text":509},{"id":567,"depth":333,"text":567},{"id":714,"depth":333,"text":715,"children":1124},[1125],{"id":719,"depth":463,"text":19},"不可编辑的下拉选择器，视觉对齐 WinUI ComboBox 的非编辑形态。","md",{},{"title":5},true,"\u002Fcomponents\u002Fselect",{"title":5,"description":1126},"components\u002Fselect","Guwec2zlfl-zFO9u2DfUFkR7N_sx4DU81H3obrk9DkM",null,1792150925036]