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

相关推荐
To_OC9 小时前
别再瞎写 React Router!7 个高频踩坑点一次性讲透
前端·javascript·react.js
岭南灯火11 小时前
前端通用交互式几何编辑器的设计法则 3 - 数据对象的设计
前端·javascript·架构
岭南灯火11 小时前
前端通用交互式几何编辑器的设计法则 2 - 交互事件流
前端·javascript·架构
岭南灯火11 小时前
前端通用交互式几何编辑器的设计法则 1 - 入口的对象及其成员
前端·javascript·架构
满栀58512 小时前
Vue.js 接口封装最佳实践:从基础到高级
前端·javascript·vue.js
kyriewen13 小时前
我踩了三次同一个坑才明白:React里"改了数据却不重新渲染"的真正原因
前端·javascript·react.js
java1234_小锋13 小时前
Vue3专题 - 事件处理
javascript·vue.js
A242073493014 小时前
React中请求拦截与响应拦截的统一处理方案
前端·javascript·react.js
zyplayer-doc14 小时前
zyplayer-doc企业知识库能做什么:从文档创建、权限管理到AI问答的完整能力
大数据·javascript·数据库·人工智能·pdf·word
烬羽15 小时前
《受控 vs 非受控:你以为用对了 useState,直到你写了那个表单》
javascript·react.js·前端框架