vue-filter-box 鐨勮癁鐢熷墠涓ゅ勾鍦?Baidu 鏃? 甯稿父鍜屾暟鎹腑鍙版墦浜ら亾, 涓€涓?FE 鍙兘闇€瑕佺淮鎶ょ潃澶氫釜涓彴, 浣嗗湪绻佺悙鍙堥噸澶嶇殑宸ヤ綔涓? 閫愭鍙互鎽哥储鍑轰竴浜涙彁鍗囧伐浣滄晥鑳界殑鏂规硶, vue-filter-box 灏辨槸鍏朵腑涔嬩竴!鏁版嵁涓彴澶у鏁伴〉闈㈤兘鏄互"绛涢€夐儴鍒? + "琛ㄦ牸"鐨勫舰寮忓瓨鍦? 涓轰簡搴斾粯閲嶅鐨勫伐浣? 鎻愬崌鑷繁鐨勫伐浣滄晥鐜? 渚胯悓鐢熶簡涓€涓兂娉? 灏?绛涢€夐儴鍒?鎶藉嚭鏉ヤ綔涓轰竴涓粍浠? 閫氳繃浼犲叆瑙勫垯鍗冲彲寰楀埌涓€涓瓫閫夊櫒, vue-filter-box 灏辨槸杩欎箞涓€涓粍浠?^.^绠€鍗曚粙缁嶈繖涓粍浠秜ue-filter-box 鏄竴娆惧熀浜?view-design 瀹炵幇鐨勫姩鎬佺瓫閫夊櫒缁勪欢, 閫氳繃浼犲叆绛涢€夐」缁撴瀯 model, 鍙互甯姪浣犲揩閫熺敓鎴愪竴涓瓫閫夊櫒!-- vue-filter-boxvue-filter-box 鍩轰簬 view-design, 閫夋嫨 view-design 鐨勫師鍥犳湁涓や釜:褰撴椂缁勫唴璐熻矗鐨勪腑鍙板ぇ閮ㄥ垎閮戒娇鐢?view-design 浣滀负 UI 妗嗘灦, 鐩存帴鍩轰簬 view-design 鍙互鐪佸幓寰堝楹荤儲view-design 鏈韩鎼哄甫鐨勭粍浠舵槸姣旇緝鍏ㄩ潰鐨? 鏈韩鐨勮璁′篃鏄负浜嗘敮鎾戝悗鍙扮鐞嗙郴缁? 鑰屼笖鍏抽敭鐨?Form 缁勪欢鍦ㄤ娇鐢ㄤ笂涔熸湭鍙戠幇涓€浜涚‖浼ゅ湪姝? 鎰熻阿 view-design 涓烘垜浠殑宸ヤ綔甯︽潵浜嗕究鍒?鍏跺疄 vue-filter-box 鍦ㄤ箣鍓嶅凡缁忓彂杩囦竴涓瘮杈冪矖绯欑殑鐗堟湰浜? v2 鏂囨。, 浣嗙敱浜庡綋鏃剁殑姘村钩杈冧綆浠ュ強瀵圭粍浠惰璁＄悊瑙ｄ笂鐨勪笉瓒? 瀵艰嚧 API璁捐浠ュ強鍐呴儴瀹炵幇閮芥湁浜涙贩涔? 鍥犳杩欐绠楁槸涓€娆″叏闈㈢殑閲嶆瀯, 鎵€浠ヤ娇鐢ㄤ簡 3.0.0 鐨勫ぇ鐗堟湰杩涜鍙戝竷 馃槉蹇€熶笂鎵?vue-filter-boxvue-filter-box 鍦ㄤ娇鐢ㄤ笂闈炲父绠€鍗? 杩欓噷涔熼潪甯哥畝鍗曞湴涓句釜 馃尠 (渚嬪瓙):<template> <vue-filter-box :value="filterValue" :model="model" :width="220"> <template v-slot:footer> <i-button>鎻愪氦</i-button> </template> </vue-filter-box></template><script>import { VueFilterBox } from 'vue-filter-box';export default { components: { VueFilterBox, }, data() { return { model: [ { type: 'i-input', label: 'Keyword', key: 'keyword', props: { placeholder: 'Please input', }, }, { type: 'i-select', label: 'Type', key: 'type', options: [ { label: 'Type1', value: 'type1' }, { label: 'Type2', value: 'type2' }, ], props: { placeholder: 'Please select', }, }, ], filterValue: {}, }; },}</script></script>model 鏄?vue-filter-box 鐨勬牳蹇冪粍鎴愰儴鍒? 鐢?modelItem 鏋勬垚; modelItem 鏄瀯鎴愭暣涓瓫閫夊櫒鐨勭瓫閫夐」; 姣斿涓婇潰鐨?model, 灏嗕細鐢熸垚涓€涓敱杈撳叆妗嗗拰涓嬫媺妗嗘瀯鎴愮殑绛涢€夊櫒:type 琛ㄧず绛涢€夐」缁勪欢, 浣犲彲浠ヤ娇鐢ㄥ瓧绗︿覆, 姣斿: i-input, 浣嗚纭繚璇ョ粍浠跺凡缁忓叏灞€娉ㄥ唽; 浣犱篃鍙互浼犲叆涓€涓?Vue Component, 鍏蜂綋鍙互鏌ョ湅 v3 鏂囨。!value 鏄?vue-filter-box 鐨勭瓫閫夐」閫変腑鍊? 渚嬪: 浣犲湪绛涢€夊櫒杈撳叆妗嗕腑杈撳叆 yaking shaking, 涓嬫媺妗嗛€変腑 Type1, 鍒欏搴旂殑 value 灏嗕細濡備笅:{ keyword: 'yaking shaking', type: 'type1'}鍥犳, 浣犱篃鍙互閫氳繃淇敼 value 浠庤€屼慨鏀圭瓫閫夊櫒閫変腑鍊紐vue-filter-box 鐨勫叾浠栧姛鑳芥敮鎸?loading, 鍚屾椂鏀寔鑷畾涔?loading 鏍峰紡鏀寔 disabled鏀寔 size 璁剧疆: default, small, large, 璇风‘淇濅綘浣跨敤鐨勭粍浠舵敮鎸佽缃?size鏀寔鑷畾涔夌瓫閫夐」鏍囬, 鍏蜂綋鏌ョ湅 v3 鏂囨。鏀寔鍨傜洿甯冨眬绛涢€夐」浠ュ強绛涢€夐」鏍囬鏀寔鏇村姞瀹芥澗鐨勫搴﹁缃敮鎸佺瓫閫夊櫒鏍￠獙, 鍗曚釜绛涢€夐」鏍￠獙, 绛涢€夊櫒閲嶇疆, 鍗曚釜绛涢€夐」閲嶇疆姣旇緝寮鸿揩鐥囩殑鍔熻兘: 绛涢€夊櫒缁勪欢鍒悕!绛涢€夊櫒缁勪欢鍒悕鏄竴涓瘮杈冮€傚悎寮鸿揩鐥囩敤鎴风殑鍔熻兘, 浣犲彲浠ラ€氳繃璁剧疆绛涢€夐」缁勪欢鍒悕, 姣斿:{ input: 'i-input', select: 'i-select',}鍚庨潰绛涢€夐」缁勪欢璁剧疆涓?input 渚跨瓑鍚屼簬 i-input..."濂芥殩鐨勫姛鑳?"浠撳簱鍦板潃Github 鍦板潃: vue-filter-box濡傛灉瑙夊緱瀵逛綘鏈夋墍甯姪, 鍙互鍦ㄤ綘鐨勯」鐩腑瀹夎杩涜浣跨敤, 鎴栨槸缁欎釜 star 猸愶笍!闂鍙嶉濡傛灉鍙戠幇缁勪欢涓瓨鍦ㄧ殑闂鎴栨槸涓嶈冻锛屽彲浠ユ彁浜や綘鐨勯棶棰樺埌 github issue, 鎴栨彁浜や竴涓?Pull Request, 鎰熻阿浣犵殑鍙備笌!
