99 < title data-vue-meta ="true "> </ title >
1010 < link rel ="stylesheet " href ="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css " />
1111
12- < link rel ="stylesheet " href ="/static/styles.03558504 .css " />
12+ < link rel ="stylesheet " href ="/static/styles.0427c76c .css " />
1313
1414 < script > if ( 'serviceWorker' in navigator ) { navigator . serviceWorker . register ( '/service-worker.js' ) } </ script >
1515</ head >
5050 }
5151 }
5252</ span > < span class ="hljs-tag "> </< span class ="hljs-name "> script</ span > ></ span >
53- </ code > </ pre > </ div > < h2 id ="duo-xuan-kuang-zu "> 多选框组</ h2 > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-checkbox-group "> < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项1</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项2</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox " disabled ="disabled "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项3</ span > </ label > <!----> </ div > < p > 你选择了 [
53+ </ code > </ pre > </ div > < h2 id ="duo-xuan-kuang-zu "> 多选框组</ h2 > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-checkbox-group "> < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项1</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项2</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox " disabled ="disabled " checked =" checked " > < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 选项3</ span > </ label > <!----> </ div > < p > 你选择了 [
5454 3
5555]</ p > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="vue-demo-source-code "> < code class ="hljs language-html "> < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox-group</ span >
5656 < span class ="hljs-attr "> v-model</ span > =< span class ="hljs-string "> "selected"</ span >
7373 }
7474 }
7575</ span > < span class ="hljs-tag "> </< span class ="hljs-name "> script</ span > ></ span >
76- </ code > </ pre > </ div > < h2 id ="duo-xuan-kuang-zu-zi-ding-yi-nei-rong "> 多选框组自定义内容</ h2 > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-checkbox-group "> < label class =" c-checkbox " > < input type =" checkbox " > < span class =" c-checkbox__box " > </ span > < span class =" c-checkbox__label " > 选项1 </ span > </ label > < label class =" c-checkbox " > < input type =" checkbox " > < span class =" c-checkbox__box " > </ span > < span class =" c-checkbox__label " > 选项2 </ span > </ label > < label class =" c-checkbox " > < input type =" checkbox " > < span class =" c-checkbox__box " > </ span > < span class =" c-checkbox__label " > 选项3 </ span > </ label > < !----></ div > < p > 你选择了 [
76+ </ code > </ pre > </ div > < h2 id ="duo-xuan-kuang-zu-zi-ding-yi-nei-rong "> 多选框组自定义内容</ h2 > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-checkbox-group "> <!----> </ div > < p > 你选择了 [
7777 "选项2"
7878]</ p > < button type ="button " class ="c-button c-button--primary "> <!----> < span > 重置</ span > </ button > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="vue-demo-source-code "> < code class ="hljs language-html "> < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox-group</ span >
7979 < span class ="hljs-attr "> v-model</ span > =< span class ="hljs-string "> "selected"</ span >
101101 }
102102 }
103103</ span > < span class ="hljs-tag "> </< span class ="hljs-name "> script</ span > ></ span >
104- </ code > </ pre > </ div > < h3 id ="indeterminate-zhuang-tai "> indeterminate 状态</ h3 > < p > < code > indeterminate</ code > 通常用于展示一组< strong > 未全部被选中</ strong > (部分选中)的多选框组状态。</ p > < div class ="vue-demo-block "> < div class ="vue-demo "> < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 全部选中</ span > </ label > < br > < div class ="c-checkbox-group "> < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Node</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Nginx</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Vue</ span > </ label > <!----> </ div > < p > 你选择了 [
104+ </ code > </ pre > </ div > < h3 id ="indeterminate-zhuang-tai "> indeterminate 状态</ h3 > < p > < code > indeterminate</ code > 通常用于展示一组< strong > 未全部被选中</ strong > (部分选中)的多选框组状态。</ p > < div class ="vue-demo-block "> < div class ="vue-demo "> < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> 全部选中</ span > </ label > < br > < div class ="c-checkbox-group "> < label class ="c-checkbox "> < input type ="checkbox " checked =" checked " > < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Node</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Nginx</ span > </ label > < label class ="c-checkbox "> < input type ="checkbox "> < span class ="c-checkbox__box "> </ span > < span class ="c-checkbox__label "> Vue</ span > </ label > <!----> </ div > < p > 你选择了 [
105105 "Node"
106106]</ p > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="vue-demo-source-code "> < code class ="hljs language-html "> < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox</ span >
107107 < span class ="hljs-attr "> v-model</ span > =< span class ="hljs-string "> "allChecked"</ span >
173173 < script src ="https://lib.baomitu.com/babel-polyfill/6.26.0/polyfill.min.js "> </ script > < script src ="https://lib.baomitu.com/fetch/2.0.3/fetch.min.js "> </ script >
174174
175175 < script src ="/static/vendor.4c63d9dc.js "> </ script >
176- < script src ="/static/framework.1430f9e6 .js "> </ script >
176+ < script src ="/static/framework.5b7c37ec .js "> </ script >
177177 < script src ="/static/manifest.63aeaded.js "> </ script >
178178</ body >
179179</ html >
0 commit comments