vue输入中文,获取英文首字母缩写

背景:要求输入中文的时候,系统给出对应的首字母大写,作为拼音。

例如:输入"博客",输出'BK' 等等......

经查:使用 js-pinyin 这个第三方插件即可实现

1. 下载依赖
javascript 复制代码
npm install js-pinyin
或者
yarn add js-pinyin
2. 导入包使用
javascript 复制代码
import pinyin from 'js-pinyin'
3. 使用方法
javascript 复制代码
<el-input v-model="name" @change="changeIndName"></el-input>
changeIndName (e) {
  let char = ''
  pinyin.setOptions({ checkPolyphone: false, charCase: 2 })
  char = pinyin.getCamelChars(e)
},

关于setOptions函数中两个参数解释如下

使用过程中我发现:charcase传0的时候是全部拼音,1的时候是首字母小写,2的时候是大写,可能注释有误,望大家注意!

相关推荐
whuhewei14 分钟前
js事件循环
前端·javascript
xiaofan110622 分钟前
Pretext:无 DOM 的多行文本测量与排版库
前端·javascript
cch891827 分钟前
Vue-Element-Admin快速上手指南
前端·javascript·vue.js
xinzheng新政1 小时前
Javascript·深入学习基础知识2
开发语言·javascript·学习
之歆2 小时前
Composition API 深度解析 - 重新理解 Vue 的组件化编程
前端·javascript·vue.js
Cxiaomu2 小时前
React Native 双端一体工程,如何实现分端运行与分端打包?
javascript·react native·react.js
斌味代码2 小时前
React 开发者学 Vue3:Composition API 核心用法对照与避坑实录
javascript·vue.js·react.js
冰暮流星2 小时前
javascript之dom访问属性
开发语言·javascript·dubbo
一只小阿乐2 小时前
TypeScript中的React开发
前端·javascript·typescript·react
Highcharts.js3 小时前
Highcharts客户端导出使用文档说明|图表导出模块讲解
前端·javascript·pdf·highcharts·图表导出