@color:#333;@activeColor:#409eff;.checkbox-wrap{margin-right:15px;瀛椾綋澶у皬锛?4px锛涚敤鎴烽€夋嫨锛氭棤锛涙父鏍囷細鎸囬拡锛涜繃娓★細鎵€鏈?.3绉掔珛鏂硅礉濉炲皵鏇茬嚎锛?.645銆?.045銆?.355銆?锛夛紱.check-icon{margin-right:5px;瀛椾綋澶у皬锛?4px锛涘瓧浣撴牱寮忥細姝e父锛涙樉绀猴細鍐呰仈鍧楋紱瀹藉害锛?4px锛涢珮搴︼細14px锛涙枃鏈榻愶細灞呬腑锛涜楂橈細14px锛涢鑹诧細#fff锛涜竟妗嗭細1pxsolid@color锛涜繃娓★細鎵€鏈?.3绉掔珛鏂硅礉濉炲皵鏇茬嚎锛?.645銆?.045銆?.355銆?锛夛紱}input[type='checkbox']{鏄剧ず锛氭棤锛泒杈撳叆[绫诲瀷='澶嶉€夋'box']:checked+.check-icon{鑳屾櫙鑹?@activeColor;杈规棰滆壊锛欯activeColor锛泒&.is-checked-text{棰滆壊锛欯activeColor锛泒}婧愮爜灏忚瘯锛氬湴鍧€鐢变簬鏈€杩戜竴鐩村湪浣跨敤Vue3锛屾湰鐫€鍏堝鍚庡純鐨勫師鍒欏皾璇曞啓浜嗕竴涓猆I缁勪欢瀹炰緥銆傝€岀涓€涓€夋嫨灏辨槸澶氶€夋鐨勭粍浠躲€傚閫夋鐨凜heckbox缁勪欢鏄钩鏃朵娇鐢ㄩ鐜囨瘮杈冮珮鐨勪竴涓粍浠躲€傜幇鍦ㄦ垜浠皢閫愭鏀硅繘鎴戜滑鐨勭粍浠躲€備粠瀹氫箟缁勪欢寮€濮?ani-checkbox>option鍒涘缓缁勪欢Checkbox.vue鏂囦欢鉁?/i>缇庡寲Checkbox锛屼富瑕佹槸鍏堥殣钘廼nput[type=checkbox]锛屽啀闅愯棌input[type=checkbox]:閫変腑鐢ㄤ簬澶勨€嬧€嬬悊鐨勯€夋嫨鍣?stylelang="less"scoped>@color:#333;@activeColor:#409eff;.checkbox-wrap{margin-right:15px;瀛椾綋澶у皬锛?4px锛涚敤鎴烽€夋嫨锛氭棤锛涙父鏍囷細鎸囬拡锛涜繃娓★細鎵€鏈?.3绉掔珛鏂硅礉濉炲皵鏇茬嚎锛?.645銆?.045銆?.355銆?锛夛紱.check-icon{margin-right:5px;瀛椾綋澶у皬锛?4px锛涘瓧浣撴牱寮忥細姝e父锛涙樉绀猴細鍐呰仈鍧楋紱瀹藉害锛?4px锛涢珮搴︼細14px锛涙枃鏈榻愶細灞呬腑锛涜楂橈細14px锛涢鑹诧細#fff锛涜竟妗嗭細1pxsolid@color锛涜繃娓★細鎵€鏈?.3绉掔珛鏂硅礉濉炲皵鏇茬嚎锛?.645銆?.045銆?.355銆?锛夛紱}input[type='checkbox']{鏄剧ず锛氭棤锛泒杈撳叆[绫诲瀷='澶嶉€夋'box']:checked+.check-icon{鑳屾櫙鑹?@activeColor;杈规棰滆壊锛欯activeColor锛泒&.is-checked-text{棰滆壊锛欯activeColor锛泒}鏁堟灉濡備笅閫昏緫澶勭悊鍏堝畾涔塸ropsoptions鎴戜滑鐭ラ亾Vue3瀵箆-model鐨勫鐞嗙暐涓庝互鍓嶄笉鍚屾牴鎹枃妗o紝prop鐨勫€煎彉鎴愪簡modelValue锛屾墍浠ユ垜浠粍浠朵腑瀹氫箟鐨刾rops闇€瑕佹敼props:{modelValue:{type:[Boolean,Number,String],default:()=>undefined}}鎴戜滑浣跨敤computed瀹炵幇鍙屽悜缁戝畾setup(props,{emit}){constmodel=computed({get(){returnprops.modelValue;},set(val){emit("update:modelValue",val);},});return{model}}娣诲姞浜嬩欢鍥炶皟杩欓噷闇€瑕佹敞鎰忕殑鏄紝鍦ㄥ彂鍑轰簨浠剁殑鏃跺€欙紝闇€瑕佸湪emits涓敞鍐宔mits锛歔'鏀瑰彉'],setup(props,{emit}){...constonChange=()=>{emit('change',model.value);}return{onChange}}鑷虫锛屼竴涓畝鍗曠殑checkbox缁勪欢灏卞畬鎴愪簡銆備絾鏄垜浠幇鍦ㄤ娇鐢ㄧ殑composition-api褰㈠紡锛屾垜浠彲浠ュ皝瑁呮暣涓€昏緫useCheckboxfunctionimport{getCurrentInstance}from'vue';瀵煎嚭鍑芥暟useCheckbox(props){const{proxy}=getCurrentInstance()constmodel=computed({get(){returnprops.modelValue;},set(val){proxy.emit("update:modelValue",val);},});constonChange=()=>{proxy.emit('change',model.value);}return{model,onChange}}鐒跺悗寮曞叆import{useCheckbox}from'./useCheckbox';setup(props){returnuseCheckbox(props);}澶氶€夋缁勬垜浠敤鍒板緢澶歎I搴撶粍浠讹紝checkbox鏈夊閫夛紝澶ч儴鍒嗗厓浠跺簱涔熸湁杩欎釜澶氶€夌粍銆傛帴涓嬫潵鎴戜滑灏佽涓€涓閫夋缁勩€傛柊寤篶heckbox-group.vue鏂囦欢