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: 首字母大写

vue项目中汉字转拼音相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...

vue项目中汉字转拼音

vue项目中汉字转拼音相关推荐

最新文章

热门文章