mint-ui를 활용하여 지방, 자치단체의 3단계 연계효과 달성

이제 mint-ui를 사용하여 지방 및 자치단체의 3단계 연계 효과를 구현하는 샘플 코드를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.

인용된 플러그인: Ele.me mint-ui 구성요소의 선택기 기능에 대한 특정 API는 공식 웹사이트 설명을 참조하세요: http://mint-ui.github.io/docs/#/zh-cn2 /picker

배경: 이 프로젝트는 성-시-지역 선택 캐스케이드 효과를 만들어야 합니다. 게이허브에서 검색해본 결과 각 기능이 완벽하고 디자인이 우리 프로젝트 스타일과 유사하기 때문에 mint-ui 컴포넌트를 사용하기로 결정했습니다.

특정 구현:

공식 웹사이트의 예제를 읽으면 아마도 이 구성 요소의 사용법을 알 수 있습니다.

vue에 구성 요소를 작성하세요: 558390be5d411971efc54b6d4be2564ab0a88308a1fcec81e78d04c5268ef556

이 구성 요소에 전달된 데이터 슬롯과 변경 시 이벤트가 트리거되는 것을 볼 수 있습니다. 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]
  },

세 가지 데이터 세트 그리고 세 가지 방법은 위와 같습니다. 지방을 선택할 때 해당 도시를 동적으로 일치시킵니다. 마찬가지로 도시를 선택할 때 해당 지역을 동적으로 일치시킵니다.

위 내용은 제가 정리한 내용입니다. 네, 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue2.0.js를 사용하여 다단계 연결 선택기 구현

JavaScript를 통해 같은 날 시간 비교

React 및 Vue 프로젝트에서 SVG를 사용하는 방법

위 내용은 mint-ui를 활용하여 지방, 자치단체의 3단계 연계효과 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!