当前位置: 首页 > Web前端 > vue.js

Vue3多选框

时间:2023-03-31 19:07:47 vue.js

@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鏂囦欢缇庡寲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鏂囦欢鍦ㄥ疄闄呬娇鐢ㄤ腑锛屾垜浠娇鐢╟heckbox-group鏉ュ寘瑁瑰閫夋缁勪欢閫夐」1閫夐」2閫夐」3妯℃澘鏂囦欢鎴戜滑鍐欏畬浜嗭紝鎺ヤ笅鏉ユ垜浠畬鍠勯€昏緫锛涜繖閲屾垜浠娇鐢╬rovide/inject浼犻€掔埗缁勪欢鍙傛暟,setup(props,ctx){//瀹氫箟浜嬩欢constchangeEvent=value=>{ctx.emit('update:modelValue',value);nextTick(()=>{ctx.emit('鏀瑰彉锛屼环鍊?;});};constmodelValue=computed({get(){returnprops.modelValue;},set(val){changeEvent(val);}});//閫氳繃鎻愪緵('CheckboxGroup',{name:'CheckboxGroup',modelValue,...toRefs(props),changeEvent});}}injectinthechildcomponentreceives//鎺ユ敹鐖剁粍浠舵秷鎭痚xportconstuseCheckboxGroup=()=>{//杩欓噷name瀵瑰簲鐨刾rovidenameconstcheckboxGroup=inject('CheckboxGroup',{});//鍒ゆ柇鏄惁涓哄閫夋缁刢onstisGroup=computed(()=>checkboxGroup&&checkboxGroup.name==='CheckboxGroup');杩斿洖{isGroup,checkboxGroup};};鍦╱seCheckbox涓紝闇€瑕佸垽鏂槸鍚︿负澶氶€夋缁勩€傚叿浣撴€濊矾鐪嬭瘎璁吼煠楋紝鍏跺疄閫昏緫寰堢畝鍗晘exportconstuseCheckbox=props=>{const{emit}=getCurrentInstance();const{isGroup,checkboxGroup}=useCheckboxGroup();//濡傛灉鏈夊閫夌粍锛屽垯浣跨敤澶氶€夌粍modelValueconststore=computed(()=>checkboxGroup?checkboxGroup.modelValue.value:props.modelValue);//杩樻槸鍒ゆ柇澶氶€塆roupconstmodel=computed({get(){returnisGroup.value?store.value:props.modelValue;},set(val){if(isGroup.value&&Array.isArray(val)){checkboxGroup.changeEvent(val);}else{emit('update:modelValue',val);}}});//鍒ゆ柇澶氶€夋鏄惁琚€変腑constisChecked=computed(()=>{constvalue=model.value;if(isPropType(value,'boolean')){returnvalue;}elseif(isPropType(value,'array')){returnvalue.includes(props.label);}returnnull;});constonChange=e=>{consttarget=e.target;甯搁噺鍊?target.checked锛熺湡鍋?鍙戝皠锛?鏀瑰彉'锛屼环鍊硷紝e锛?};杩斿洖{妯″瀷锛宨sChecked锛宱nChange};};杩欓噷闇€瑕佷慨鏀规ā鏉匡紝鎴戜滑闇€瑕佷紶鍏elected閫夐」瀛楁鍊煎拰澶氶€夋鏄惁琚嬀閫?labelclass="checkbox-wrap">鉁?/i>鏉ュ疄鐜版晥鏋滄€荤粨涓€涓嬶紝杩樻槸闇€瑕佽嚜宸辨墦鍖呫€傜粍浠朵腑鐨勪竴浜涚粏鑺傚拰鎬濇兂瀵逛簬涓氬姟閫昏緫浠嶇劧寰堥噸瑕併€傛湁涓€瀹氱殑鍚彂浣滅敤銆傛杩庡叧娉ㄣ€愬墠绔浠€涔堛€戜竴璧蜂氦娴?/p>