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

相关推荐
弹简特7 小时前
【Vue3速成】01-npm+vue初体验+vite构建vue工程化
vue.js·arcgis·npm
坚定信念,勇往无前7 小时前
electron-vite 安装better-sqlite3
javascript·数据库·electron
@菜菜_达7 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
摸鱼小李上线了8 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js
砍材农夫8 小时前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty
爱滑雪的码农8 小时前
React Native 完整开发全流程(从零到上线)
javascript·react native·react.js
HwJack208 小时前
HarmonyOS APP开发中ArkTS/JS 类型错误全景拆解
javascript·华为·harmonyos
子琦啊8 小时前
构造函数、this指向和原型链机制
javascript·算法·贴图
Maimai108089 小时前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
前端·javascript·react.js·前端框架·状态模式
Maimai108089 小时前
React Query + Zustand 正确结合方式:不要把接口数据复制进 Store
前端·javascript·react.js·前端框架·web3·状态模式