【vue3示例】文章添加拼音

pinyin-pro 这个插件使用方便，功能多，具备中文拼音转换、中文拼音匹配、分词、带拼音中文格式 HTML 字符串转换等丰富的功能，效率高，准确率也很高，大部分的词汇都能识别。

1. 安装

npm install pinyin-pro

2. 使用方式

拼音

import { pinyin } from 'pinyin-pro';

// 获取带音调拼音 
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'

// 获取数组形式带音调拼音 
pinyin('汉语拼音', { type: 'array' }); // ["hàn", "yǔ", "pīn", "yīn"]

声母

import { pinyin } from 'pinyin-pro';

// 获取声母 
pinyin('汉语拼音', { pattern: 'initial' }); // 'h y p y'

// 获取数组形式声母 
pinyin('汉语拼音', { pattern: 'initial', type: 'array' }); // ["h", "y", "p", "y"]

韵母

import { pinyin } from 'pinyin-pro';

// 获取带音调韵母 
pinyin('汉语拼音', { pattern: 'final' }); // 'àn ǔ īn īn' 
// 获取不带音调韵母 
pinyin('汉语拼音', { pattern: 'final', toneType: 'none' }); // 'an u in in' 
// 获取数组形式带音调韵母 
pinyin('汉语拼音', { pattern: 'final', type: 'array' }); // ["àn", "ǔ", "īn", "īn"] 

首字母

import { pinyin } from 'pinyin-pro';

// 获取拼音首字母 
pinyin('赵钱孙李额', { pattern: 'first' }); // 'z q s l é'

// 获取数组形式拼音首字母 
pinyin('赵钱孙李额', { pattern: 'first', type: 'array' }); // ['z', 'q', 's', 'l', 'é']

多音字

import { pinyin } from 'pinyin-pro'; 

// 获取多音 
pinyin('好', { multiple: true }); // 'hǎo hào' 

// 获取数组形式多音 
pinyin('好', { multiple: true, type: 'array' }); // ["hǎo", "hào"] 

// text 不为单个字符时 multiple 不生效 
pinyin('好学', { multiple: true }); // hào xué

功能很多，可以直接去官网查看 pinyin-pro.cn

3. 示例代码

我觉得最好用的还是直接可以把文字转换成html格式的字符串，可以直接使用。

<template>
  <div class="text" v-html="htmlStr"></div>
</template>
<script setup>
import { html } from "pinyin-pro";
import { story } from '@/assets/json/text.js'

let htmlStr = ref(html(story))
</script>

简单粗暴，方法简单，准确率也很高。