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

最近做项目中，碰到了点小麻烦：

后台从接口请求回来的城市相关的数据只有城市名称，没有排序，铺页面的时候要排序就很麻烦；

面向百度编程时候找到了一个包，用它来将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。

这个包的名字叫js-pinyin。

• npm下载

  npm i js-pinyin

• 下载完了之后在main.js中引入

  import pinyin from ‘js-pinyin‘

这样使用环境就配置好了。

当在组件中使用时，要先在export default前引用node_modules/js-pinyin中的index.js文件：

import pinyin from ‘../../../node_modules/js-pinyin/index‘

注意node_modules/js-pinyin的文件路径

因为我要在页面加载时就使用这个需要排序的数据，所以我将代码写入mounted()中。

在使用真实数据前，我们先写一个小demo：

在组件中使用时，要添加

let pinyin = require(‘js-pinyin‘);

和

pinyin.setOptions({checkPolyphone: false, charCase: 0});

两行代码，一个是引入js-pinyin，一个是配置js-pinyin。

完整的demo就是这样：

mounted() {
    let pinyin = require('js-pinyin');
    pinyin.setOptions({checkPolyphone: false, charCase: 0});
    console.log(pinyin.getFullChars('管理员'));    //GuanLiYuan
    console.log(pinyin.getCamelChars('管理员'));    //GLY
    console.log(pinyin.getCamelChars('1234'));    //1234
    console.log(pinyin.getCamelChars('english'));    //english
}

上述2个console.log中使用的函数，是js-pinyin中设计好的2个函数，作用分别是：

• getFullChars()：获取字符串全部拼音，并且首字母大写；
• getCamelChars() ： 获取字符串拼音首字母，并大写；

getCamelChars()中传入的参数不是汉字时，不会进行转换，仍然输出源字符串。

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

原文：https://www.cnblogs.com/lzb1234/p/11353152.html