【前端进阶开发日记 ❤】那就来封装一个城市选择器吧
theme: channing-cyan
持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情
写在前面
哎呀呀,每次都是要沉淀好久好久才能更一篇文章...基本上半个月都很难出一篇,但还是想把这个系列做起来,主要是为了记录自己学习和开发的过程,以便在面试的时候讲项目,能说得头头是道(◍•ᴗ•◍)
马上就要开始准备面试啦~想冲冲冲去北京!!我也会努力更文哒!! 💪 💪
简介
今天来讲讲怎么封装一个城市选择器吧~
大概介绍一下它的功能,能够按照城市或省份进行分类选择,其中每个tab下都有按照字母拼音开头的选择,点击后能跳转到相应的区域去选择具体城市,右上角还有一个下拉框选择器,可以直接选择对应的城市,默认按照拼音顺序排列,效果如下
大体框架先搭建起来,捋一捋这个小组件的封装逻辑~
-
首先需要行文字来显示城市,然后还有上下箭头以标识是否显示弹出框
-
弹出框以及里面元素的布局
- 处理数据并渲染到对应DOM元素上
- 最后是书写跳转和选择的逻辑
- 完善右上角下拉选择框逻辑
好~大概的思路我们已经建立了,接下来就让我们开始实战吧ꉂꉂ꒰•̤▿•̤*ૢ꒱
第一步
虽然效果图上看起来是只有两个元素,但其实有三个呢,其中一个被隐藏了
这个是用v-if和v-else,加上给这俩图标一个visible属性,设置Boolean值来控制显示和隐藏的
但其实有更好的解决方案,确实是只有两个元素来做这个。我们知道,v-if的切换开销是相对来说比较大的,因为它操作的是DOM元素的存在与否,这样容易引起浏览器的Layout即回流,渲染的性能相对来说比较低
所以取而代之的是,通过操作样式来实现这个功能
```
``` 我们给这个图标组件动态绑定样式,通过rotate来控制它的标识性,也摒弃了两个图标来做转化的思路,而是用css3内置的属性来做这个功能,点击后把图标进行180°旋转
第二步
这边主要就是考验基本功了,布局走起~
你以为那些字母会是好多好多个span?吼吼!才不是呢
首先后台给的数据格式是这样的
citis对象里面包含了多个数组对象,字母拼音是键,数组对象是值,每一个数组对象中又包含了多个对象,每一个对象代表一个城市,有对应的id
值得学习的一点是,这边是动态渲染DOM然后进行布局,代码真的很优雅好吧!!
```
``` 这边有渲染字母,也就是object的key值两种方法,一种是直接遍历这个cities对象,另一种调用Object.keys()方法遍历cities的key本身,大家取贴合自己学习习惯的方法就好~
第三步
数据格式如上所述,需要渲染成效果图那样,左边显示的是key,右边显示的是城市
html
<el-scrollbar max-height="300px">
<template v-for="(value, key) in cities" :key="key">
<el-row style="margin-bottom: 10px;" :id="key">
<el-col :span="2">{{ key }}:</el-col>
<el-col :span="22" class="city-name">
<div
@click="clickItem(item)"
class="city-name-item"
v-for="(item, index) in value"
:key="item.id"
>
<div>{{ item.name }}</div>
</div>
</el-col>
</el-row>
</template>
</el-scrollbar>
直接在template里面处理数据,也是同样的遍历操作,用el-row和el-col来分区域,左边占2份的是拼音(或省份)部分,右边占22份的是城市部分
我们来审查一下元素以验证,对视觉要求比较高的小伙伴也可以根据实际情况进行微调
第四步
这里是最最最难写的部分啦 🤣 🤣也是最容易出bug的部分,我们一步一步来仔细分析吧~
首先明确我们的目标,在这一步我们需要实现两个主要功能:
-
点击字母拼音能跳转到对应区域
-
点击要选择的城市之后渲染在一开始的span上
4.1 功能一
功能一的核心实现在于跳转,怎么实现这个跳转比较好呢?
我们都知道,在原生开发中做这个功能最熟悉最常见的就是用a标签来做这个区域跳转
但是a标签的实现原理是通过改变路由来实现跳转功能的,这就意味着,如果我们用a标签那就要更改路径,但我们这个封装组件的整体是放在vue3项目中的,不便于我们实现功能
好在我们还能调用原生的DOM方法,不知道大家有没有见过这个scrollIntoView方法
js
// 点击字母区域
let clickChat = (item: string) => {
let el = document.getElementById(item)
//操作原生DOM,跳转到指定区域
if (el) el.scrollIntoView()
}
4.2 功能二
我们首先找到渲染城市数据的DOM元素,然后给它绑定一个clickItem事件
```html
``` 在这一步骤我们需要做的事情有两个: 一个是渲染选择到的城市并且分发事件给父组件,二是关闭弹出框
js
// 点击每个城市
let clickItem = (item: City) => {
// 给结果赋值
result.value = item.name
// 关闭弹出层
visible.value = false
emits('changeCity', item)
}
往往我们自己做项目的时候想不到细节处,比如选择完毕之后关闭弹出框。实际上逻辑并不复杂,但真正自己动手敲起来还真没那么容易哈,不敲不知道,一敲bug一堆( Ꙭ)
第五步
还有最后一个功能就是右上角的下拉选择框,这边我们也细分为两个功能要实现
-
自定义搜索城市,可以根据中文也可以根据拼音搜索
-
下拉框选择城市
5.1 功能一
自定义搜索,我们需要在setup中新建一个filterMethod方法用来过滤数据
并且对数据先进行一个简单的处理方便后续进行过滤,取到cities.value是一个数组对象,我们用flat方法将它解析出来
js
// 自定义搜索过滤
let filterMethod = (val: string) => {
console.log(cities.value)
let values = Object.values(cities.value).flat(2)
}
打印出的cities.value如下
根据MDN文档介绍,flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
处理过后的values如下图所示
经过了这些数据处理之后,再来定义过滤搜索的内容
分为三种情况,一种是val为空,二是按照中文过滤,三是按照拼音过滤,过滤的核心方法是通过filter和includes去判断是否遍历的数据中是否包含val,然后返回对应的结果
js
// 自定义搜索过滤
let filterMethod = (val: string) => {
let values = Object.values(cities.value).flat(2)
if (val === '') {
options.value = values
} else {
if (radioValue.value === '按城市') {
// 中文和拼音一起过滤
options.value = values.filter(item => {
return item.name.includes(val) || item.spell.includes(val)
})
} else {
// 中文过滤
options.value = values.filter(item => {
return item.name.includes(val)
})
}
}
}
5.2 功能二
下拉框选择城市也需要进行数据匹配,这里涉及到一个很实用的数组方法Array.prototype.find()
find()
方法返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined
```js
// 所有的城市数据
let allCity = ref
// 下拉框选择 let changeSelect = (val: number) => { let city = allCity.value.find(item => item.id === val)! result.value = city.name if (radioValue.value === '按城市') { emits('changeCity', city) } else { emits('changeProvince', city.name) } } ``` 这里用数组的find方法去查找符合id匹配的数据,找得到就将返回值赋值给city
然后再取city的name赋值到城市选择器最终结果的span上
总结
到这里整个封装城市选择器这个组件的工作差不多就结束啦~
个人最大的感触就是,乍一看这个组件还是挺复杂的,但是一步步把它拆解开来之后发现,每一个细小处的工作其实并不难,难的是如何将这些拆分的步骤组织成一个完整的组件架构
也希望这篇文章能给大家一些思路和启发~ 🥰 🥰
如果大家想要这个组件的完整源码,可以在评论区@我~ 感谢看到这里的每一个小伙伴๐•ᴗ•๐