이제 mint-ui를 사용하여 지방 및 자치단체의 3단계 연계 효과를 구현하는 샘플 코드를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.
인용된 플러그인: Ele.me mint-ui 구성요소의 선택기 기능에 대한 특정 API는 공식 웹사이트 설명을 참조하세요: http://mint-ui.github.io/docs/#/zh-cn2 /picker
배경: 이 프로젝트는 성-시-지역 선택 캐스케이드 효과를 만들어야 합니다. 게이허브에서 검색해본 결과 각 기능이 완벽하고 디자인이 우리 프로젝트 스타일과 유사하기 때문에 mint-ui 컴포넌트를 사용하기로 결정했습니다.
특정 구현:
공식 웹사이트의 예제를 읽으면 아마도 이 구성 요소의 사용법을 알 수 있습니다.
vue에 구성 요소를 작성하세요:
이 구성 요소에 전달된 데이터 슬롯과 변경 시 이벤트가 트리거되는 것을 볼 수 있습니다. onValuesChange(), 이 구성 요소의 상위 구성 요소인 경우 Component 를 사용합니다.
내에서 Slots 와 onValuesChange 를 등록하면 됩니다. 다음은 공식 홈페이지의 예시입니다:
export default { methods: { onValuesChange(picker, values) { if (values[0] > values[1]) { picker.setSlotValue(1, values[0]); } } }, data() { return { slots: [ { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot1', textAlign: 'right' }, { pider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot3', textAlign: 'left' } ] }; } };
실제 동작 시 Picker 를 이용하여 지방, 시, 지역을 선택하고자 할 때, 가장 큰 문제점은 플러그인의 데이터 형식에 맞는 데이터를 찾아서 바이두에서 성, 도시, 지역 데이터를 스크랩하고 이를 처리하는 함수를 작성했습니다. 공유하세요:
onProvinceChange(picker, values) { this.province = picker.getValues()[0] var cityArr = []; for(var key in provinceCity[this.province]) { cityArr.push(key); } this.slots2[0].values = cityArr; }, onCityChange(picker, values) { this.city = picker.getValues()[0] var countyArr = []; for(var key in provinceCity[this.province][this.city]) { countyArr.push(key); } this.slots3[0].values = countyArr; }, onCountyChange(picker, values) { this.county = picker.getValues()[0] },
세 가지 데이터 세트 그리고 세 가지 방법은 위와 같습니다. 지방을 선택할 때 해당 도시를 동적으로 일치시킵니다. 마찬가지로 도시를 선택할 때 해당 지역을 동적으로 일치시킵니다.
위 내용은 제가 정리한 내용입니다. 네, 앞으로 모든 분들께 도움이 되길 바랍니다.
관련 기사:
React 및 Vue 프로젝트에서 SVG를 사용하는 방법
위 내용은 mint-ui를 활용하여 지방, 자치단체의 3단계 연계효과 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!