Dalam beberapa tahun kebelakangan ini, teknologi bahagian hadapan sentiasa dikemas kini, dan kemunculan rangka kerja bahagian hadapan juga telah meningkatkan kecekapan pembangunan harian kami. Di bawah rangka kerja Vue.js, kami boleh melaksanakan banyak komponen berfungsi yang biasa digunakan dengan mudah, seperti pemilih bandar.
Jadi, bagaimana untuk melaksanakan pemilih bandar dalam Vue? Artikel ini akan berkongsi dengan anda kaedah pelaksanaan yang mudah.
1. Penyediaan data
Sebelum melaksanakan pemilih bandar, kita perlu menyediakan data bandar. Memandangkan terdapat banyak data bandar, kami perlu menggunakan format data JSON untuk menyimpannya. Di sini, saya menyediakan fail data JSON yang boleh anda temui dalam talian atau dalam sumber lain.
Sampel fail data bandar:
[
{
"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. Pelaksanaan komponen pemilih
2.1 Memperkenalkan data bandar
Kami perlu memperkenalkan data bandar dalam bahagian skrip komponen:
<script>
import cityData from './city-data.json';
export default {
// 组件属性和方法
}
</script>2.2 Tentukan komponen pemilih
pemilihan Bekas boleh digunakan di beberapa tempat dan kita boleh mentakrifkannya sebagai komponen. Dalam komponen ini, kita perlu menentukan beberapa sifat dan kaedah. Atribut:<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>2.3 Memaparkan data bandar
<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>Kod komponen pemilih bandar terakhir adalah seperti berikut:
<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 Menggunakan pemilih bandar
Menggunakan komponen pemilih bandar dalam projek Vue adalah sangat mudah, hanya perlu Memperkenalkan bandar. komponen pemilih ke dalam halaman yang anda gunakan, dan kemudian masukkan parameter yang sepadan apabila menggunakannya. Berikut ialah contoh kod:
<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>Pada ketika ini, kami sudah boleh menggunakan komponen pemilih bandar dalam aplikasi Vue kami. Kod komponen pemilih bandar ini sangat mudah, tetapi ia melaksanakan fungsi pemilihan bandar asas dan boleh dikembangkan dan dioptimumkan mengikut keperluan anda sendiri.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemilih bandar menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
