📖Vue-cli 简单的汉字转换拼音

前言

只能进行简单常见的文字进行转换，如果是繁体或复制的字则不会转换

效果

具体效果如图所示

步骤

首先安装插件

npm install js-pinyin --save

HTML 代码

    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">输入文字</label>
        <div class="col-sm-10">
          <input type="text" name="" @keyup='ConvertName()' v-model="text" class="form-control" placeholder="输入文字">
        </div>
      </div>
            <div class="form-group">
        <label class="col-sm-2 control-label">全写拼音：</label>
        <div class="col-sm-10">
          <input type="text" v-model='msg' class="form-control" placeholder="拼音..." disabled/>
        </div>
      </div>
            <div class="form-group">
        <label class="col-sm-2 control-label">简写拼音：</label>
        <div class="col-sm-10">
          <input type="text" v-model='jian' class="form-control" placeholder="首字母大写..." disabled/>
        </div>
      </div>
  </form>

Javascript 代码

<script type="text/javascript">
let pinyin = require('js-pinyin');//加载插件
export default{
  name: 'hello',
  data (){
    return {
      text:'',
      msg: '',
      jian:''
    }
  },methods:{
    ConvertName(){    
      this.msg = pinyin.getFullChars(this.text)
      this.jian = pinyin.getCamelChars(this.text)
    }
  }
}
</script>