방금 VUE에 참여하기 시작했기 때문에 Zhihu의 구현 방법에 대한 선택된 모든 참조의 구현 :
1. 서버에서 데이터를 가져 와서 각 항목에 대해 확인 된 속성을 설정합니다.
2. 선택한 수량 selectCount를 계산하십시오. 선택한 수량이 SELECTITEMS 수와 같으면 모든 SELECTALL을 선택하십시오.
3. 모두를 선택할 때 각 항목의 확인 된 속성을 true로 설정하고 반대로 선택할 때 False로 설정하십시오.
4. SelectItems의 속성이 변경 될 때마다 확인 된 항목은 배열 확인 그룹에 배치됩니다.
다음은 구현 코드입니다.
// 모든 데이터를 선택하십시오 : function () {return {selectItems : [], // 서버에서 얻은 데이터}}}}, 계산 : {// checkbox로 바인딩 된 모든 모델을 선택하십시오 : {get : function () {return this.selectCount == this.selectItems.length; }, set : function (value) {this.selectitems.foreach (function (item) {item.checked = value;}); 반환 값; }}, // 선택한 수량 selectCount : {get : function () {var i = 0; this.selectitems.foreach (function (item) {if (item.checked) {i ++;}}); 반환 i; }}, // 선택한 배열 checkedgroups : {get : function () {var checkedGroup = []; this.selectitems.foreach (function (item) {if (item.checked) {checkedgroups.push (item);}}); 반환 체크 그룹; }}}이 방법은 사용하기 편리하지 않습니다. 우선, 재사용하기가 어렵습니다. 사용할 때마다 컴퓨팅을 작성해야합니다. 둘째, selectall, checkedgroups 및 selectItems는 모두 고정되어 있으며 유연하지 않습니다.
이 프로젝트에서 VUE 명령을 사용하여 모든 선택의 기능을 다시 구현했습니다. 지침의 아이디어는 실제로 컴퓨팅 된 아이디어와 유사합니다. 코드부터 시작하겠습니다.
내보내기 기본값 { 'check -all': {twoway : true, params : [ 'checkData'], bind () { / ** - 모든 목록의 확인 된 속성이 true 인 경우 모든 상자를 선택하지 않으면 모든 상자가 선택되지 않으면 선택하지 않습니다* / this.vm. $ watch (this.params.checkdata, (checkdata)) = {checkdata. this.set (true); }, // update (checkall) checkall이 변경되면 { / ** - 모든 상자 확인이 선택되면 모든 확인 된 속성이 true로 변환됩니다. 그렇지 않으면 false* / if (checkall) {this.vm [this.vm [this.params.checkdata] .foreach ((item) => {item.checked = true;})로 변환됩니다. } else {this.vm [this.params.checkdata] .foreach ((item) => {item.checked = false;}); }},},};라고 불리는:
<입력 유형 = "checkbox"v-model = "checkall"v-Check-al = "checkall"check-data = "checkdata"> <ul> <li v-for = "checkData의 항목"> <input type = "checkbox"v-model = "item.checked"> {{item.text}} </ul>이것을 사용하는 장점에 대해 이야기 해 봅시다.
1. 사용하기 쉬운. v-check-all 명령을 작성하고 필요한 경우 check-data 작성하십시오.
2. 선택한 모델 및 배열 이름을 사용자 정의 할 수 있으며 모든 이름을 사용할 수 있습니다. Checkall 및 CheckallData에 전화하지 않으려면 어레이 및 CheckData DataFromserver를 호출 할 수도 있습니다.
명령어에서 twoway를 true로 지정하면 this.set(value) 사용하여 Checkall의 값을 설정하고 Params를 사용하여 바인딩 명령 요소에서 속성 값 checkData를 수신합니다. 이는 작동 할 배열입니다.
this.vm 사용하여 사용 지시문의 컨텍스트를 얻으려면 컨텍스트의 $watch 에 전화하여 CheckData의 변경 사항을 듣습니다. 모든 CheckData를 선택하면 Checkall을 true로 설정하고 그렇지 않으면 Checkall을 False로 설정하십시오.
명령 값 (Checkall)이 변경되면 true 인 경우 CheckData의 확인 된 속성을 true로 설정하면 False입니다. 이 시점에서 선택한 명령이 완료됩니다.
이 선택을 수행 할 때 원래 Paramwatchers를 사용하여 CheckData 변경을 듣고 싶었지만 CheckData가 변경되면 Paramwatchers의 콜백이 트리거되지 않는다는 것을 알았습니다. 나중에 소스 코드를보고 Paramwatchers가 실제로 $watch 라고 불리는 것을 발견했지만 깊은 탐지를 지원하지는 않습니다.
Directive.prototype._setupparamwatcher = function (key, expression) {var self = this; var 호출 = false; var Unkatch = (this._scope || this.vm). $ watch (표현, 함수 (val, oldval) {self.params [key] = val; // 우리는 즉각적인 모드에 있기 때문에 // 첫 번째 업데이트가 아닌 경우 매개 변수 변경 콜백을 호출합니다. if (cal) {cb); if (cb); val, oldval)} else {true}}, {ormer : user : false});요약
위는이 기사의 전체 내용입니다. 잘못된 것이 있다면 조언을 해주세요. 이 기사의 내용이 모든 사람에게 도움이되기를 바랍니다.