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

相关推荐
古夕6 分钟前
my-first-ai-web_问题记录02:Next.js 15 动态路由参数处理
前端·javascript·react.js
清风不问烟雨z1 小时前
不仅仅是 Mock 服务:mock-h3,让前端也能优雅拥有后端能力
前端·javascript·vite
Lsx_2 小时前
TypeScript 是怎么去查找类型定义的?
前端·javascript·typescript
....4923 小时前
Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件
前端·javascript·vue.js
范范之交3 小时前
JavaScript基础语法two
开发语言·前端·javascript
bitbitDown4 小时前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc4 小时前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
小高0074 小时前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕4 小时前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Solon阿杰4 小时前
solon-flow基于bpmnJs的流程设计器
javascript·bpmn-js