Maison > Article > interface Web > Comment implémenter le sélecteur de ville à l'aide de Vue ?
Comment implémenter le sélecteur de ville à l'aide de Vue ?
- WBOYoriginal
- 2023-06-25 13:43:261326parcourir
Ces dernières années, la technologie front-end a été constamment mise à jour et l'émergence de frameworks front-end a également considérablement amélioré l'efficacité de notre développement quotidien. Dans le cadre de Vue.js, nous pouvons facilement implémenter de nombreux composants fonctionnels couramment utilisés, tels que les sélecteurs de villes.
Alors, comment implémenter le sélecteur de ville dans Vue ? Cet article partagera avec vous une méthode de mise en œuvre simple.
1. Préparation des données
Avant d'implémenter le sélecteur de ville, nous devons préparer les données de la ville. Comme il existe de nombreuses données sur les villes, nous devons utiliser un format de données JSON pour les stocker. Ici, je fournis un fichier de données JSON que vous pouvez trouver en ligne ou dans d'autres ressources.
Exemple de fichier de données de ville :
[
{
"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. Implémentation du composant de sélection
2.1 Présentation des données de ville
Nous devons introduire les données de ville dans la partie script du composant :
<script>
import cityData from './city-data.json';
export default {
// 组件属性和方法
}
</script>2.2 Définir le composant de sélection
En raison de la ville sélection Le conteneur peut être utilisé à plusieurs endroits et nous pouvons le définir comme un composant. Dans ce composant, nous devons définir certaines propriétés et méthodes.
Attributs :
- modelValue : la valeur de la ville actuellement sélectionnée ;
- placeholder : l'invite dans la zone de saisie du sélecteur ;
- width : la largeur de la zone de saisie du sélecteur ;
- disabled : si le sélecteur est désactivé ; readonly : indique si le sélecteur est en lecture seule.
- handleChangeCity : méthode de rappel après sélection d'une ville.
<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 Code complet du composant du sélecteurLe code final du composant du sélecteur de ville est le suivant :<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 Utilisation du sélecteur de villeL'utilisation du composant de sélection de ville dans le projet Vue est très simple, il suffit de présenter la ville. composant sélecteur dans la page que vous utilisez, puis transmettez les paramètres correspondants lors de son utilisation. Voici un exemple de code : <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>À ce stade, nous pouvons déjà utiliser le composant sélecteur de ville dans notre application Vue. Le code de ce composant de sélection de ville est très simple, mais il implémente la fonction de sélection de ville de base et peut être étendu et optimisé en fonction de vos propres besoins. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du composant keep-alive dans Vue et de ses scénarios d'utilisationArticle suivant：Explication détaillée du composant keep-alive dans Vue et de ses scénarios d'utilisation
Articles Liés
Voir plus- À propos de vue utilisant le validateur : VeeValidate3
- Quelles sont les différences entre calculé et méthode dans Vue ?
- Introduction à la méthode de désactivation de la vérification Eslint dans le projet vue
- Introduction à plusieurs méthodes de définition de modèles de composants dans Vue.js
- Quatre endroits pour implémenter AJAX dans les applications Vue