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的时候是大写,可能注释有误,望大家注意!

相关推荐
掘金安东尼12 分钟前
零 JavaScript 的性能优化视频嵌入
前端·javascript·面试
Filotimo_28 分钟前
Vue 选项式 API vs 组合式 API:区别全解析
前端·javascript·vue.js
unirst198500730 分钟前
使用vite打包并部署vue项目到nginx
前端·vue.js·nginx
wuhen_n1 小时前
JavaScript 手写 new 操作符:深入理解对象创建
前端·javascript
前端 贾公子1 小时前
Vue3 业务组件库按需加载的实现原理(中)
前端·javascript·vue.js
温轻舟1 小时前
前端可视化大屏【附源码】
前端·javascript·css·html·可视化·可视化大屏·温轻舟
滕青山1 小时前
文件16进制查看器核心JS实现
前端·javascript·vue.js
wuhen_n1 小时前
JavaScript 手写 call、apply、bind:深入理解函数上下文绑定
前端·javascript
Jing_Rainbow1 小时前
【React-9/Lesson93(2025-12-30)】React Hooks 深度解析:从基础到实战🎯
前端·javascript·react.js
web打印社区1 小时前
web-print-pdf:专为Web打印而生的专业解决方案
前端·javascript·vue.js·electron·html