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>