需求:用戶在輸入姓和名字的時候,由于姓(拼音)和名(拼音)為字母,容易輸錯,于是就有了自動生成拼音這個需求

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。