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

 

<template>
   <div >
       <dl class="m-categroy">
            <dt>按拼音字母选择：</dt>
            <!-- 大写拼音字母导航栏 -->
            <dd v-for="item in list" :key="item">
                <a :href="'#city'+item">
                    {{item}}
                </a>
            </dd>
       </dl>

       <dl v-for="item in block" :key="item.title" class="m-categroy-section">
           <!-- 左侧大写字母标签 -->
           <dt :id="'city'+item.title">
               {{item.title}}
           </dt>
           <!-- 右侧所属城市 -->
           <dd>
              <span v-for="c in item.city" :key="c">
                  {{c}}
              </span> 
           </dd>
       </dl>
   </div>
</template>

 

<script>
// 汉字转拼音库
import pyjs from 'js-pinyin'
export default {
  data() {
    return {
        list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
        block : []
           
    }
  },

  //获取所有的城市
  async mounted(){
        let self = this ;
        ////以大写字母为键的，分好组的城市列表
        let blocks = []
        let {status ,data:{city}} = await self.$axios.get('/geo/city');

        // 按照每个城市的首位拼字字母分组
        if(status===200){
            //分好组的城市对象
            var d = {} ;
            city.forEach(item => {
                // 将获取的全部城市的汉字转为拼音，且小写，只取首字母
               var  p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0,1);
                //将每个字母转为 Unicode 编码。判断是否属于a-z字母
                var c = p.charCodeAt(0) ;
                if(c > 96 && c<123){
                    //d[p]表示每个字母对应的城市列表，如
                    // {
                    //     a:[],
                    //     b: [
                    //         北京、北海...
                    //     ],
                    //     ...
                    // }
                    if(!d[p]){
                        d[p] = []
                    }
                    d[p].push(item.name)
                }
            });
            //es6中遍历对象,将所有的键由小写字母转为大写字母
            for(let [k,v] of Object.entries(d)){
                blocks.push({
                    title : k.toUpperCase() ,
                    city : v
                })
            }
            //将分好组的城市列表，按照字母大小排序
            blocks.sort((a,b)=>{
                a.title.charCodeAt(0) - b.title.charCodeAt(0)
            })
            //最终
            self.block = blocks

        }


  }
}
</script>