vue项目中汉字转拼音

1、使用插件

lodash
js-pinyin

2、下载

npm install js-pinyin

点击查看插件文档

3、方法封装

在js文件中引入两个插件，并初始化js-pinyin插件

import Pinyin from 'js-pinyin'
Pinyin.setOptions({ charCase: 1 })

setOptions中传入对象，对象可传两个参数
charCase参数： 输出拼音的大小写模式，0-首字母大写；1-全小写；2-全大写

checkPolyphone：是否检查多音字

封装一个调用后可以按照开头字母排序的方法

sortList = (data, name = 'name') => {
  if (!_.isArray(data) || !data.length) return []
  return _.sortBy(data, c => {
    if (c.children && c.children.length > 0) {
      c.children = sortList(c.children, name)
    }
    return makePy.getFullChars(c[name])
  })
}

完整js文件为：

import _ from 'lodash'
import Pinyin from 'js-pinyin'

Pinyin.setOptions({ charCase: 1 })
export const makePy = Pinyin
/**
 * 按照字母顺序排序
 */
export const sortList = (data, name = 'name') => {
  if (!_.isArray(data) || !data.length) return []
  return _.sortBy(data, c => {
    if (c.children && c.children.length > 0) {
      c.children = sortList(c.children, name)
    }
    return makePy.getFullChars(c[name])
  })
}

js-pinyin插件的方法

getCamelChars: 获取拼音首字母
getFullChars: 获取拼音
_capitalize: 首字母大写