vue输入框输入中文字符，获取中文拼音首字母缩写

需求：在开发过程中遇到一个需求：input框输入中文字符，另一个input框获取到它的拼音首字母缩写

查阅资料：利用第三方pinyin插件库

参考git：https://github.com/waterchestnut/pinyin

1. 安装此插件

npm install js-pinyin

2. 在需要的组件中引入此组件

import pinyin from 'js-pinyin'

3. 输入中文的输入框事件@input触发获取到输入的中文字符值

modelParams.value.CheckFieldName是需要获取拼音缩写的输入框绑定的值。

<el-form-item label="表单名称" prop="CheckName">
              <el-input v-model="modelParams.CheckName" clearable placeholder="请输入名称" style="width: 300px"
                        @input="onInput"></el-input>
            </el-form-item>
            <el-form-item label="拼音缩写名" prop="CheckFieldName">
              <el-input v-model="modelParams.CheckFieldName" clearable disabled placeholder="请输入"
                        style="width: 300px"></el-input>
</el-form-item>

function onInput(name) {
  let char = ''
  pinyin.setOptions({checkPolyphone: false, charCase: 1});
  char = pinyin.getCamelChars(name);
  modelParams.value.CheckFieldName = char;
}

4. 实现效果

需要注意：

1、官方给出的实例中option配置项：charCase为0，调用getCamelChars方法时，获取到的是大写的首字母缩写，我们自己也可以利用toLowerCase转化为小写。

查看源码：charCase为1则获取到小写拼音缩写，其他为大写拼音缩写。

2、getFullChars为获取到中文字符拼音全拼，则charCase: 2则设置为全部字母大写

function onInput(name) {
  let char = ''
  pinyin.setOptions({checkPolyphone: false, charCase: 2});
  char = pinyin.getFullChars(name);
  modelParams.value.CheckFieldName = char;
}

3、则charCase: 3或者charCase: 4或者其他数字则设置为首字母大写其他字母小写。

function onInput(name) {
  let char = ''
  pinyin.setOptions({checkPolyphone: false, charCase: 4});
  char = pinyin.getFullChars(name);
  modelParams.value.CheckFieldName = char;
}

效果：