需求:用户在输入姓和名字的时候,由于姓(拼音)和名(拼音)为字母,容易输错,于是就有了自动生成拼音这个需求

npm install安装的四种用法-save和-save-dev

npm install xxx：安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。

npm install -g xxx: -g的意思是将模块安装到全局，不是安装到当前目录的项目下

npm install -save xxx: -save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install -save-dev xxx:

-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

一:安装

 npm install js-pinyin --save

二:使用<script></script>标签引入

     let pinyin = require('js-pinyin');pinyin.setOptions({checkPolyphone: false, charCase: 0});

三:使用示例

 <template><div class="demo"><input v-model="surname" type="text" placeholder="姓(中文)"><input v-model="surnamePinyin.toUpperCase()" type="text" placeholder="姓(拼音)"><input v-model="givenName" type="text" placeholder="名(中文)"><input v-model="givenNamePinyin" type="text"  placeholder="名(拼音)"></div></template><script>let pinyin = require('js-pinyin');pinyin.setOptions({checkPolyphone: false, charCase: 0});console.log(pinyin.getFullChars('徐').toUpperCase());console.log(pinyin.getFullChars('管理员'));console.log(pinyin.getCamelChars('管理员'));console.log(pinyin.getCamelChars('1234'));console.log(pinyin.getCamelChars('english'));export default {name: "School",data() {return{surname:'',givenName:''}},computed:{surnamePinyin(){return pinyin.getFullChars(this.surname)},givenNamePinyin(){return pinyin.getFullChars(this.givenName)}}}</script>

三:属性详解

 // setOptions中传入对象，对象可传两个参数// charCase参数： 输出拼音的大小写模式，0-首字母大写；1-全小写；2-全大写// checkPolyphone：是否检查多音字 pinyin.setOptions({checkPolyphone: false, charCase: 0});// getCamelChars: 获取拼音首字母// getFullChars: 获取拼音console.log(pinyin.getFullChars('徐'));Xuconsole.log(pinyin.getCamelChars('徐'));X

输出结果,因为要求姓的拼音是大写,可以通过

pinyin.setOptions 设置charCase为1 或者直接toUpperCase()即可

vue汉字转拼音-pinyin.js相关推荐

js vue汉字转拼音或拼音首字母
第一种 html <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
signature=cb97f07fbd7b371e6311b0d8707b6398,vue 汉字转拼音(filter)
最近的项目要用到将用户的汉字转为拼音并首字母大写网上搜集了些资料整理了一个filter ? app.jsimport filters from './utils/filters' Object.k ...
汉字转拼音pinyin
这里引用的是 well2049 老哥的博客原文链接如有侵权,马上删除使用方法 //返回全拼 pinyin.getFullChars('西安'); //XiAn //返回首字母 pinyin.g ...
获取拼音-pinyin.js
/* --- 中文转拼音获取首字母 ... */ let pinyin = function pinyin() {var Pinyin = function (ops) {this.initiali ...
Vue 组件封装 | 给汉字注音（带声调），内含汉字转拼音（带声调/不带声调），获取汉字首字母的方法
目录 s-pinyin 组件封装相关参数 <s-pinyin content="我们都有一个家,名字叫中国."></s-pinyin> s-pinyin ...
javascript 汉字生成拼音
在网上下载的一个汉字生成拼音的js,很有用,大家一起分享! var PinYin = {"a":"/u554a/u963f/u9515","ai&qu ...
java汉字转拼音工具类源代码
原文:java汉字转拼音工具类源代码源代码下载地址:http://www.zuidaima.com/share/1550463387880448.htm 汉字转拼音 Pinyin pinyin = ...
vue js 汉字转拼音
汉语转拼音 pinyin:{'a': '\u554a\u963f\u9515','ai': '\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77e ...
vue集成汉字转拼音插件
一.需要引入的文件 1.const.js文件,定义常量,文件内容如下: export const pinyin = {'a': '\u554a\u963f\u9515','ai': '\u57c3\u ...

vue汉字转拼音-pinyin.js