Vue中使用js-pinyin包实现城市按首字母排序

https://www.npmjs.com/package/js-pinyin

参考

https://blog.csdn.net/weixin_38644883/article/details/88884460

https://www.cnblogs.com/lzb1234/p/11353152.html

 1 <template>
 2    <div >
 3        <dl class="m-categroy">
 4             <dt>按拼音字母选择：</dt>
 5             <!-- 大写拼音字母导航栏 -->
 6             <dd v-for="item in list" :key="item">
 7                 <a :href="'#city'+item">
 8                     {{item}}
 9                 </a>
10             </dd>
11        </dl>
12 
13        <dl v-for="item in block" :key="item.title" class="m-categroy-section">
14            <!-- 左侧大写字母标签 -->
15            <dt :city'+item.title">
16                {{item.title}}
17            </dt>
18            <!-- 右侧所属城市 -->
19            <dd>
20               <span v-for="c in item.city" :key="c">
21                   {{c}}
22               </span> 
23            </dd>
24        </dl>
25    </div>
26 </template>

 1 <script>
 2 // 汉字转拼音库
 3 import pyjs from 'js-pinyin'
 4 export default {
 5   data() {
 6     return {
 7         list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
 8         block : []
 9            
10     }
11   },
12 
13   //获取所有的城市
14   async mounted(){
15         let self = this ;
16         ////以大写字母为键的，分好组的城市列表
17         let blocks = []
18         let {status ,data:{city}} = await self.$axios.get('/geo/city');
19 
20         // 按照每个城市的首位拼字字母分组
21         if(status===200){
22             //分好组的城市对象
23             var d = {} ;
24             city.forEach(item => {
25                 // 将获取的全部城市的汉字转为拼音，且小写，只取首字母
26                var  p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0,1);
27                 //将每个字母转为 Unicode 编码。判断是否属于a-z字母
28                 var c = p.charCodeAt(0) ;
29                 if(c > 96 && c<123){
30                     //d[p]表示每个字母对应的城市列表，如
31                     // {
32                     //     a:[],
33                     //     b: [
34                     //         北京、北海...
35                     //     ],
36                     //     ...
37                     // }
38                     if(!d[p]){
39                         d[p] = []
40                     }
41                     d[p].push(item.name)
42                 }
43             });
44             //es6中遍历对象,将所有的键由小写字母转为大写字母
45             for(let [k,v] of Object.entries(d)){
46                 blocks.push({
47                     title : k.toUpperCase() ,
48                     city : v
49                 })
50             }
51             //将分好组的城市列表，按照字母大小排序
52             blocks.sort((a,b)=>{
53                 a.title.charCodeAt(0) - b.title.charCodeAt(0)
54             })
55             //最终
56             self.block = blocks
57 
58         }
59 
60 
61   }
62 }
63 </script>