Vue3+ts+pinyin-pro实现网页显示拼音标注效果

pinyin-pro 参考文档，具体配置参考文档。。。

实现效果

代码参考

<template>
  <div>
    <div v-for="(line, lineIndex) in textLines" :key="lineIndex" class="line">
      <div class="line-content">
        <div
          v-for="(char, charIndex) in line.characters"
          :key="charIndex"
          class="char-container"
        >
          <div class="pinyin">{{ char.pinyin }}</div>
          <div class="character">{{ char.character }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { pinyin, addDict } from 'pinyin-pro'

// 引入前需要先通过 `npm install @pinyin-pro/data` 进行安装 使用完整字典 但是体积有点大啊 这里只是测试
import CompleteDict from '@pinyin-pro/data/complete'

addDict(CompleteDict)

// 毛泽东的《沁园春·长沙》
const poem = `
独立寒秋，湘江北去，橘子洲头。
看万山红遍，层林尽染；漫江碧透，百舸争流。
鹰击长空，鱼翔浅底，万类霜天竞自由。
怅寥廓，问苍茫大地，谁主沉浮？

携来百侣曾游，忆往昔峥嵘岁月稠。
恰同学少年，风华正茂；书生意气，挥斥方遒。
指点江山，激扬文字，粪土当年万户侯。
曾记否，到中流击水，浪遏飞舟？
`

const textLines = poem
  .split('。')
  .map((line) => {
    return {
      characters: line
        .split('')
        .map((char) => ({
          character: char,
          // { toneType: 'none' } 没有声调 { toneType: 'default' } 默认有声调
          pinyin: pinyin(char),
        }))
        .filter((char) => char.character.trim() !== ''),
    }
  })
  .filter((line) => line.characters.length > 0)
</script>

<style scoped>
.line {
  margin-bottom: 20px;
}

.line-content {
  display: flex;
  justify-content: flex-start;
}

.char-container {
  width: 40px; /* 设置固定宽度 */
  text-align: center;
  margin-right: 5px;
}

.pinyin {
  font-size: 14px;
  color: gray;
}

.character {
  font-size: 20px;
}
</style>

这样就快速实现了拼音标注效果~~~是不是很简单呢~~~

总结

pinyin-pro 是一个用于汉字转拼音的功能强大的 JavaScript 库，具有以下特点和用法总结：

1. 拼音转换：将汉字转换为拼音，可以选择是否带声调。
2. 字典支持：可以使用自定义字典，以提高拼音转换的准确性和灵活性，例如包含多音字的处理。
3. 灵活配置：支持多种配置选项，包括声调类型、字典选择等。
4. 样式调整：使用 CSS 进行文字的样式调整，比如设置字符容器的宽度、对齐方式等，让拼音和汉字在视觉上美观且整齐。