이번에는 Vue 영역 선택 컴포넌트 사용법과 Vue 영역 선택 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
개요
주로 도, 시, 군의 3단계 연계, 지역 데이터 추가 및 삭제 등 국가 지역 데이터 운영에 사용됩니다. Selection은 컴포넌트 이전에도 사용되었으나, 많은 양의 지역 데이터를 연산할 때 렌더링 속도가 느리기 때문에 데이터 표시 형태와 인터랙션 형태를 다르게 변경하여 이 컴포넌트를 탄생시켰습니다.
참고: 이 구성 요소는 vue.js 구성 요소입니다.
demo
데모하려면 여기를 클릭하세요
API
Props
Parameters | type | 지침 |
---|---|---|
area | Array | 들어오는 구성 요소 영역 데이터 |
Events
EventsName | Parameters | Description |
---|---|---|
selected | area | 구성 요소에 대한 자세한 설명 selected Region |
Props
area
area 매개변수는 필수이며 구성요소가 초기화될 때 지역 데이터를 나타냅니다. 비어 있을 수 있습니다. Area는 여러 객체를 포함하는 배열입니다. 각 객체의 데이터 구조는 다음과 같습니다.
... area: [ {Name: '北京', ID: '01'}, {Name: '南京', ID: '0401'}, {Name: '西湖区', ID: '060105'} ], ...
나중에 실제 사용하면서 배경이 영역의 ID 값만 반환하는 경우가 있어서 여기에서 수행했습니다. 최적화에서는 다음과 같이 ID 값만 전달할 수 있습니다.
... area: [ {ID: '01'}, {ID: '0401'}, {ID: '060105'} ], ...
selected
selected는 구성 요소 외부에서 이 이벤트를 구독하여 반환되는 값을 얻을 수 있습니다. 이 값은 구성요소가 현재 선택한 모든 지역이며, 반환된 값은 지역 데이터를 포함하는 여러 개체로 구성된 배열이며, 데이터 구조는 면적 매개변수
간단한 예
<p> <addressmap :area="area" @selected="selected"></addressmap> </p>
Installation과 동일합니다. use
npm install adc-addressmap
글로벌 컴포넌트로 사용하는 경우
//在项目入口文件 import Vue from 'vue' import Addressmap from 'adc-addressmap' Vue.component('Addressmap', Addressmap) 若作为局部组件 //在某个组件中 import Addressmap from 'adc-addressmap' export default { ... components: { Addressmap}, ... }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Node.js에서 Koa를 사용하여 사용자 인증을 구현하는 방법
위 내용은 Vue 영역 선택 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!