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

一个提高效率的过滤器组件vue-filter-box

时间:2023-03-31 14:37:28 vue.js

涓ゅ勾鍓峷ue-filter-box鍦ㄧ櫨搴﹁癁鐢熺殑鏃跺€欙紝鎴戠粡甯稿拰鏁版嵁涓彴鎵撲氦閬撱€備竴涓狥E鍙兘闇€瑕佺淮鎶ゅ涓腑鍙帮紝浣嗘槸鍦ㄧ箒鐞愰噸澶嶇殑宸ヤ綔涓紝鎴戜篃鑳介€愭笎鎵惧埌涓€浜涙彁楂樺伐浣滄晥鐜囩殑鏂规硶銆傛柟娉曪紝vue-filter-box灏辨槸鍏朵腑涔嬩竴锛佹暟鎹腑蹇冪殑澶ч儴鍒嗛〉闈㈤兘鏄互鈥滆繃婊ら儴鍒嗏€?鈥滆〃鏍尖€濈殑褰㈠紡瀛樺湪鐨勩€備负浜嗗簲瀵归噸澶嶆€х殑宸ヤ綔锛屾彁楂樿嚜宸辩殑宸ヤ綔鏁堢巼锛岃悓鐢熶簡涓€涓兂娉曪細灏嗏€滆繃婊ら儴鍒嗏€濇娊鍙栧嚭鏉ヤ綔涓轰竴涓粍浠讹紝閫氳繃浼犲叆瑙勫垯寰楀埌涓€涓繃婊ゅ櫒锛寁ue-filter-box灏辨槸杩欐牱涓€涓粍浠禴.^绠€鍗曡涓嬩粙缁嶈繖涓粍浠秜ue-filter-box鏄竴涓熀浜巚iew-design瀹炵幇鐨勫姩鎬佽繃婊ゅ櫒缁勪欢锛屽彲浠ラ€氳繃浼犲叆杩囨护鍣ㄩ」缁撴瀯妯″瀷鏉ュ府鍔╀綘蹇€熺敓鎴愯繃婊ゅ櫒锛?-vue-filter-boxvue-filter-box鍩轰簬瑙嗗浘璁捐銆傞€夋嫨view-design鐨勫師鍥犳湁涓や釜锛氬綋鏃堕泦鍥腑澶ч儴鍒嗕腑鍙伴兘浣跨敤view-design浣滀负UI妗嗘灦銆傜洿鎺ュ熀浜巚iew-design鍙互鐪佸幓寰堝楹荤儲銆傚叧閿瓼orm缁勪欢鐨勪娇鐢ㄦ病鏈変换浣曠憰鐤点€傛劅璋iew-design缁欐垜浠殑宸ヤ綔甯︽潵浜嗕究鍒╋紒鍏跺疄vue-filter-box涔嬪墠宸茬粡鍑鸿繃涓€涓矖鐣ョ殑鐗堟湰锛歷2鏂囨。锛屼絾鏄敱浜庡綋鏃舵按骞充綆锛屽缁勪欢璁捐鐨勭悊瑙d笉澶燂紝API璁捐鍜屽唴閮ㄥ疄鐜版湁浜涙贩涔憋紝鎵€浠ヨ繖涓綋鏃惰€冭檻鍏ㄩ潰閲嶆瀯锛屾墍浠ヤ娇鐢ㄥぇ鐗堟湰3.0.0鍙戝竷馃槉蹇€熶笂鎵媣ue-filter-boxvue-filter-box浣跨敤闈炲父绠€鍗曪紝杩欓噷涔熷緢绠€鍗曫煂帮紙渚嬪瓙锛夛細model鏄痸ue-filter-box鐨勬牳蹇冪粍浠讹紝鐢眒odelItem缁勬垚锛沵odelItem鏄瀯鎴愭暣涓繃婊ゅ櫒鐨勮繃婊ゅ櫒椤癸紱渚嬪涓婇潰鐨勬ā鍨嬩細鐢熸垚涓€涓敱杈撳叆妗嗗拰涓嬫媺妗嗙粍鎴愮殑杩囨护鍣細type琛ㄧず杩囨护椤圭粍浠讹紝鍙互浣跨敤瀛楃涓诧紝渚嬪锛歩-input锛屼絾璇风‘淇濊缁勪欢宸插湪鍏ㄧ悆娉ㄥ唽锛涗篃鍙互浼犲叆涓€涓猇ue缁勪欢锛岃瑙乿3鏂囨。!value鏄痸ue-filter-box鐨勮繃婊ら」閫夋嫨鐨勫€硷紝渚嬪锛氫綘鍦ㄨ繃婊よ緭鍏ユ杈撳叆yakingshaking锛屼笅鎷夋琚€変腑type1锛屽搴旂殑鍊间細鏄繖鏍凤細{keyword:'yakingshaking',type:'type1'}鎵€浠ワ紝浣犱篃鍙互閫氳繃淇敼value鏉ヤ慨鏀筬ilter閫夋嫨鐨勫€紐vue-filter-box鐨勫叾浠栧姛鑳芥敮鎸乴oading锛屽悓鏃舵敮鎸佽嚜瀹氫箟鍔犺浇鏍峰紡锛屾敮鎸乨isabled锛屾敮鎸佸ぇ灏忚缃細default锛宻mall锛宭arge锛岃纭繚浣犱娇鐢ㄧ殑缁勪欢鏀寔璁剧疆澶у皬锛屾敮鎸佽嚜瀹氫箟杩囨护椤规爣棰橈紝璇﹁v3鏂囨。鏀寔绔栨帓杩囨护椤癸紝杩囨护椤规爣棰樻敮鎸佹洿瀹芥澗瀹藉害璁剧疆鏀寔杩囨护楠岃瘉锛屽崟涓繃婊ら」楠岃瘉锛岃繃婊ら噸缃紝鍗曚釜杩囨护椤归噸缃繕鏈夋洿澶氬己杩棁鍔熻兘锛氳繃婊ょ粍浠跺埆鍚嶏紒杩囨护缁勪欢鍒悕鏄竴涓瘮杈冮€傚悎寮鸿揩鐥囩敤鎴风殑鍔熻兘锛屽彲浠ヨ缃繃婊ら」缁勪欢鐨勫埆鍚嶏紝濡傦細{input:'i-input',select:'i-select',}杩囨护鍚巌tem缁勪欢璁剧疆涓篿nput锛岀浉褰撲簬i-input鈥︹€︹€滃ソ鏆栧績鐨勫姛鑳斤紒鈥濅粨搴撳湴鍧€Github鍦板潃锛氬鏋滆寰梫ue-filter-box瀵逛綘鏈夊府鍔╋紝鍙互鍦ㄤ綘鐨勯」鐩腑瀹夎浣跨敤锛屾垨鑰呯粰涓猻tar猸愶笍锛侀棶棰樺弽棣堝鏋滄偍鍙戠幇缁勪欢鏈変换浣曢棶棰樻垨涓嶈冻锛岃鎮ㄥ皢鎮ㄧ殑闂鎻愪氦鍒癵ithubissue锛屾垨鑰呮彁浜や竴涓狿ullRequest锛屾劅璋㈡偍鐨勫弬涓庯紒