vue3+ts封装chooseCity城市选择器

vue3+ts封装chooseCity

概述

先上效果图

样式采用elementplus，各个组件详情查看elementplus官网

整体采用popover作弹出框，需要注意的是elementplus，使用插槽的方式，标题一个在popover里的reference具名插槽，插槽内部我们添加标题和下拉图标

下拉图标采用arrowdown（该图标为elementplus图标库封装后的，自己的项目请按照elementplus官网的用法）,class通过visible控制样式，如果弹出框可见，代表此时已经下拉，将下拉箭头改为上拉

  

1
2
3
4
5
6

icon样式部分

// 下拉旋转180度即可改为上拉
.rotate {
  transform: rotate(180deg);
}
// 图标转动的时候设置0.25s的动画效果
svg {
  width: 1em;
  height: 1em;
  transition: all 0.25s linear;
}
1
2
3
4
5
6
7
8
9
10

按城市和按省份分类采用radio单选框，下拉+搜索框采用select和option

字母部分根据数据渲染即可，具体内容采用scrollbar包裹

最终选择到具体城市，触发自定义事件传递数据，并将选择的城市渲染到页面上

重点代码

关于点击字母跳转到对应城市

如果使用a链接的话，会导致路由改变，不合适，所以采用操作dom的方式，我们给每块数据绑定一个id属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

接下来通过scrollIntoView跳转即可

    // 点击字母，参数为点击的字母
    let clickChat = (item: string) => {
      // 获取dom中的这个字母id
      let el = document.getElementById(item)
      // 跳转到对应位置
      if (el) el.scrollIntoView()
    }
1
2
3
4
5
6
7

下拉框搜索

开启el-select组件的自定义搜索功能

  

1
2
3
4
5
6
7
8
9
10
11
12

过滤函数

数据拍平后过滤，将结果返回options用于渲染

由于数据的原因，按城市时可以同时实现中英文过滤，按省份则只能中文过滤

let filterMethod = (val: string) => {
  searchValue.value = val
  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)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

项目完整代码

chooseCity.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255

types.ts

export interface City {
  id: number,
  // 拼音
  spell: string,
  // 名字
  name: string
}

export interface Province {
  name: string,
  data: string[],
  id?: string
}
1
2
3
4
5
6
7
8
9
10
11
12
13

城市数据

支持首字母+拼音+省份搜索城市数据: 支持首字母+拼音+省份搜索城市数据 (gitee.com)## vue3+ts封装chooseCity