Vue를 사용하여 도시 선택기를 구현하는 방법은 무엇입니까?
- WBOY원래의
- 2023-06-25 13:43:261265검색
최근 몇 년 동안 프론트엔드 기술은 지속적으로 업데이트되었으며, 프론트엔드 프레임워크의 등장으로 일상적인 개발의 효율성도 크게 향상되었습니다. Vue.js 프레임워크에서는 도시 선택기와 같이 일반적으로 사용되는 많은 기능 구성 요소를 쉽게 구현할 수 있습니다.
그렇다면 Vue에서 도시 선택기를 구현하는 방법은 무엇일까요? 이 기사에서는 간단한 구현 방법을 공유합니다.
1. 데이터 준비
도시 선택기를 구현하기 전에 도시 데이터를 준비해야 합니다. 도시 데이터가 많기 때문에 JSON 데이터 형식을 사용하여 저장해야 합니다. 여기에서는 온라인이나 다른 리소스에서 찾을 수 있는 JSON 데이터 파일을 제공합니다.
도시 데이터 파일 샘플:
[
{
"label": "北京市",
"value": "110000",
"children": [
{
"label": "北京市",
"value": "110100",
"children": [
{
"label": "东城区",
"value": "110101"
},
{
"label": "西城区",
"value": "110102"
},
{
"label": "崇文区",
"value": "110103"
},
...
]
}
]
},
{
"label": "上海市",
"value": "310000",
"children": [
{
"label": "上海市",
"value": "310100",
"children": [
{
"label": "黄浦区",
"value": "310101"
},
{
"label": "徐汇区",
"value": "310104"
},
{
"label": "长宁区",
"value": "310105"
},
...
]
}
]
},
...
]2. 선택기 구성요소 구현
2.1 도시 데이터 소개
구성요소의 스크립트 부분에 도시 데이터를 도입해야 합니다:
<script>
import cityData from './city-data.json';
export default {
// 组件属性和方法
}
</script>2.2 선택기 구성요소 정의
도시로 인해 Selection 컨테이너는 여러 위치에서 사용될 수 있으며 이를 컴포넌트로 정의할 수 있습니다. 이 구성 요소에서는 몇 가지 속성과 메서드를 정의해야 합니다.
속성:
- modelValue: 현재 선택된 도시 값
- placeholder: 선택기 입력 상자의 프롬프트
- disabled: 선택기 비활성화 여부; 읽기 전용: 선택기가 읽기 전용인지 여부입니다.
- 메서드:
handleChangeCity: 도시 선택 후 콜백 메소드.
<template>
<div class="city-picker">
<input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedCity">
<!-- 其他相关 DOM 结构 -->
</div>
</template>
<script>
import cityData from './city-data.json';
export default {
props: {
modelValue: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择城市'
},
width: {
type: String,
default: '200px'
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
selectedCity: this.modelValue,
// 城市数据
cityData: []
}
},
methods: {
handleChangeCity(value) {
this.selectedCity = value;
// 触发父组件的 onChange 事件
this.$emit('onChange', value);
}
},
mounted() {
this.cityData = cityData;
}
}
</script><template>
<div>
<!-- 递归渲染省份数据 -->
<template v-for="province in cityData">
<div :key="province.value" class="province">
<div @click="handleShowCity(province)">{{ province.label }}</div>
<template v-if="province.children && province.children.length > 0">
<div v-show="province.showCity">
<!-- 递归渲染城市和区县数据 -->
<template v-for="city in province.children">
<div :key="city.value" class="city">
<div @click="handleShowDistrict(city)">{{ city.label }}</div>
<template v-if="city.children && city.children.length > 0">
<div v-show="city.showDistrict">
<div v-for="district in city.children" :key="district.value">{{ district.label }}</div>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
<script>
import cityData from './city-data.json';
export default {
props: {
modelValue: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择城市'
},
width: {
type: String,
default: '200px'
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
selectedCity: this.modelValue,
// 城市数据
cityData: []
}
},
methods: {
handleShowCity(province) {
// 点击省份时，展开或关闭城市数据
province.showCity = !province.showCity;
},
handleShowDistrict(city) {
// 点击城市时，展开或关闭区县数据
city.showDistrict = !city.showDistrict;
// 选中城市后，调用 handleChangeCity 方法
this.handleChangeCity(city.label);
},
handleChangeCity(value) {
this.selectedCity = value;
// 触发父组件的 onChange 事件
this.$emit('onChange', value);
},
// 递归遍历城市数据，渲染出每一个层级的城市数据
renderCity(cityData) {
cityData.forEach(city => {
city.showDistrict = false;
if (city.children && city.children.length > 0) {
this.renderCity(city.children);
city.showCity = false;
}
})
}
},
mounted() {
this.cityData = cityData;
// 渲染城市数据
this.renderCity(this.cityData);
}
}
</script>2.4 전체 선택기 구성 요소 코드최종 도시 선택기 구성 요소 코드는 다음과 같습니다.<template>
<div class="city-picker">
<input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedCity">
<!-- 城市选择器弹出框 -->
<div class="city-picker-modal" v-show="showModal">
<div class="city-picker-header">
<span>请选择城市</span>
<span class="close-icon" @click="handleCloseModal">×</span>
</div>
<div class="city-picker-body">
<!-- 渲染城市选择器树形结构 -->
<div class="city-picker-tree">
<div class="top-tab">
<div
:class="{ active: (activeTab === 'province') }"
@click="handleToggleTab('province')"
>省份</div>
<div
:class="{ active: (activeTab === 'city') }"
@click="handleToggleTab('city')"
>城市</div>
<div
:class="{ active: (activeTab === 'district') }"
@click="handleToggleTab('district')"
>区县</div>
</div>
<div class="tab-content">
<template v-if="activeTab === 'province'">
<!-- 渲染省份数据 -->
<template v-for="province in cityData">
<div :key="province.value" class="province">
<div @click="handleShowCity(province)">{{ province.label }}</div>
<template v-if="province.children && province.children.length > 0">
<div v-show="province.showCity">
<!-- 渲染城市数据 -->
<template v-for="city in province.children">
<div :key="city.value" class="city">
<div @click="handleShowDistrict(city)">{{ city.label }}</div>
<template v-if="city.children && city.children.length > 0">
<div v-show="city.showDistrict">
<!-- 渲染区县数据 -->
<div v-for="district in city.children" :key="district.value">{{ district.label }}</div>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</template>
<template v-else-if="activeTab === 'city'">
<!-- 渲染城市数据 -->
<template v-for="province in cityData">
<template v-if="province.children && province.children.length > 0">
<template v-for="city in province.children">
<div :key="city.value" class="city">{{ city.label }}</div>
</template>
</template>
</template>
</template>
<template v-else-if="activeTab === 'district'">
<!-- 渲染区县数据 -->
<template v-for="province in cityData">
<template v-if="province.children && province.children.length > 0">
<template v-for="city in province.children">
<template v-if="city.children && city.children.length > 0">
<template v-for="district in city.children">
<div :key="district.value">{{ district.label }}</div>
</template>
</template>
</template>
</template>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import cityData from './city-data.json';
export default {
props: {
modelValue: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择城市'
},
width: {
type: String,
default: '200px'
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
// 当前选中的城市
selectedCity: this.modelValue,
// 城市数据
cityData: [],
// 显示弹出框标志位
showModal: false,
// 当前显示的 tab 标签页
activeTab: 'province'
}
},
methods: {
// 选中省份时，展开或关闭城市数据
handleShowCity(province) {
province.showCity = !province.showCity;
this.activeTab = (province.showCity ? 'city' : 'province');
},
// 选中城市时，展开或关闭区县数据，并选中城市
handleShowDistrict(city) {
city.showDistrict = !city.showDistrict;
this.activeTab = (city.showDistrict ? 'district' : 'city');
this.selectedCity = city.label;
// 触发父组件 onChange 事件
this.$emit('onChange', city.label);
// 关闭弹出层
this.showModal = false;
},
// 切换 tab 标签页
handleToggleTab(tab) {
this.activeTab = tab;
},
// 关闭城市选择器弹窗
handleCloseModal() {
this.showModal = false;
}
},
mounted() {
this.cityData = cityData;
// 递归渲染城市数据，设置状态
this.cityData.forEach((province) => {
province.showCity = false;
if (province.children && province.children.length > 0) {
province.children.forEach((city) => {
city.showDistrict = false;
})
}
})
}
}
</script>3. 도시 선택기 사용Vue 프로젝트에서 도시 선택기 구성 요소를 사용하는 것은 매우 간단합니다. 도시만 소개하면 됩니다. 선택기 구성 요소를 사용 중인 페이지에 추가한 다음 사용할 때 해당 매개변수를 전달합니다. 다음은 코드 예입니다. <template>
<div>
<CityPicker
v-model="city"
:width="200"
></CityPicker>
</div>
</template>
<script>
import CityPicker from './components/CityPicker';
export default {
components: {
CityPicker
},
data() {
return {
city: ''
}
},
methods: {
handleChangeCity(value) {
console.log('选中的城市为：', value);
}
}
}
</script>이 시점에서 이미 Vue 애플리케이션에서 도시 선택기 구성 요소를 사용할 수 있습니다. 이 도시 선택기 컴포넌트의 코드는 매우 간단하지만 기본적인 도시 선택 기능을 구현하고 필요에 따라 확장하고 최적화할 수 있습니다. 위 내용은 Vue를 사용하여 도시 선택기를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.