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.545c8fde .css " />
12+ < link rel ="stylesheet " href ="/static/styles.03558504 .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 " checked =" checked " > < 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 "> < 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 > < 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 > 你选择了 [
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 > 你选择了 [
77+ "选项2"
78+ ]</ 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 >
79+ < span class ="hljs-attr "> v-model</ span > =< span class ="hljs-string "> "selected"</ span >
80+ ></ span >
81+ < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox</ span > < span class ="hljs-attr "> label</ span > =< span class ="hljs-string "> "a"</ span > ></ span > 选项1< span class ="hljs-tag "> </< span class ="hljs-name "> c-checkbox</ span > ></ span >
82+ < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox</ span > < span class ="hljs-attr "> label</ span > =< span class ="hljs-string "> "选项2"</ span > ></ span > < span class ="hljs-tag "> </< span class ="hljs-name "> c-checkbox</ span > ></ span >
83+ < span class ="hljs-tag "> << span class ="hljs-name "> c-checkbox</ span > < span class ="hljs-attr "> label</ span > =< span class ="hljs-string "> "选项3"</ span > ></ span > < span class ="hljs-tag "> </< span class ="hljs-name "> c-checkbox</ span > ></ span >
84+ < span class ="hljs-tag "> </< span class ="hljs-name "> c-checkbox-group</ span > ></ span >
85+
86+ < span class ="hljs-tag "> << span class ="hljs-name "> p</ span > ></ span > 你选择了 {{ selected }}< span class ="hljs-tag "> </< span class ="hljs-name "> p</ span > ></ span >
87+
88+ < span class ="hljs-tag "> << span class ="hljs-name "> c-button</ span > < span class ="hljs-attr "> primary</ span > @< span class ="hljs-attr "> click</ span > =< span class ="hljs-string "> "resetSelected"</ span > ></ span > 重置< span class ="hljs-tag "> </< span class ="hljs-name "> c-button</ span > ></ span >
89+
90+ < span class ="hljs-tag "> << span class ="hljs-name "> script</ span > ></ span > < span class ="javascript ">
91+ < span class ="hljs-keyword "> export</ span > < span class ="hljs-keyword "> default</ span > {
92+ data () {
93+ < span class ="hljs-keyword "> return</ span > {
94+ < span class ="hljs-attr "> selected</ span > : [< span class ="hljs-string "> "选项2"</ span > ]
95+ }
96+ },
97+ < span class ="hljs-attr "> methods</ span > : {
98+ resetSelected () {
99+ < span class ="hljs-keyword "> this</ span > .selected = []
100+ }
101+ }
102+ }
103+ </ 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 > 你选择了 [
77105 "Node"
78106]</ 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 >
79107 < span class ="hljs-attr "> v-model</ span > =< span class ="hljs-string "> "allChecked"</ span >
145173 < 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 >
146174
147175 < script src ="/static/vendor.4c63d9dc.js "> </ script >
148- < script src ="/static/framework.517ef6ee .js "> </ script >
149- < script src ="/static/manifest.25227512 .js "> </ script >
176+ < script src ="/static/framework.0364b043 .js "> </ script >
177+ < script src ="/static/manifest.313c8988 .js "> </ script >
150178</ body >
151179</ html >
0 commit comments