pinyin-pro库使用方式

pinyin-pro 是一个专业的 JavaScript 中文转拼音的库,具备多音字识别准确、体积轻量、性能优异、功能丰富等特点。

pinyin-pro官网链接: 介绍 | pinyin-pro

运行展示

**pinyin-pro**安装命令:

复制代码
# 选择一个你使用的包管理器进行安装即可

# NPM
$ npm install pinyin-pro --save

# Yarn
$ yarn add pinyin-pro

# pnpm
$ pnpm install pinyin-pro

代码部分,自己可参照官网步骤来操作

我写的参考看看就行,主要是自己动手实现你想要的方式

javascript 复制代码
<template>
    <div>
        <h4>获取带音调拼音</h4>
        <h6>惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚</h6>
        <p>{{ pinyin('惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚') }}</p>
        <hr/>

        <h4>获取不带声调的拼音</h4>
        <h6>关关雎鸠,在河之洲</h6>
        {{ pinyin('关关雎鸠,在河之洲', { toneType: 'none' }) }} 
        <hr/>

        <h4>获取声调转换为数字后缀的拼音</h4>
        <h6>思君如流水,何有穷已时</h6>
        {{ pinyin('思君如流水,何有穷已时', { toneType: 'num' }) }}
        <hr/>

        <h4>获取数组形式带音调拼音</h4>
        <h6>白发三千丈,缘愁似个长</h6>
        {{ pinyin('白发三千丈,缘愁似个长', { type: 'array' }) }}
        <hr/>

        <h4>获取数组形式不带声调的拼音</h4>
        <h6>愿我如星君如月,夜夜流光相皎洁</h6>
        {{ pinyin('愿我如星君如月,夜夜流光相皎洁', { toneType: 'none', type: 'array' }) }}
        <hr/>

        <h4>获取数组形式声调转换为数字后缀的拼音</h4>
        <h6>花红易衰似郎意,水流无限似侬愁</h6>
        {{ pinyin('花红易衰似郎意,水流无限似侬愁', { toneType: 'num', type: 'array' }) }}
        <hr/>

        <h4>......</h4>
        <hr/>

        <h4>获取拼音首字母</h4>
        <h6>夜月一帘幽梦,春风十里柔情</h6>
        {{ pinyin('夜月一帘幽梦,春风十里柔情', { pattern: 'first' }) }}
        <hr/>

        <h4>获取不带音调拼音首字母</h4>
        <h6>深知身在情长在,怅望江头江水声</h6>
        {{ pinyin('深知身在情长在,怅望江头江水声', { pattern: 'first', toneType: 'none' }) }}
        <hr/>

        <h4>获取数组形式拼音首字母</h4>
        <h6>只愿君心似我心,定不负相思意</h6>
        {{ pinyin('只愿君心似我心,定不负相思意', { pattern: 'first', type: 'array' }) }}
        <hr/>

        <h4>......</h4>
        <hr/>

        <h4>拼音首字母转成大写</h4>
        <h6>众里寻他千百度,蓦然回首,那人却在,灯火阑珊处</h6>
        {{ pinyin('众里寻他千百度,蓦然回首,那人却在,灯火阑珊处', { pattern: 'first' }).toUpperCase() }}
        <hr/>

        <h4>拼音首字母转成小写</h4>
        <h6>断无蜂蝶慕幽香,红衣脱尽芳心苦</h6>
        {{ pinyin('断无蜂蝶慕幽香,红衣脱尽芳心苦', { pattern: 'first' }).toLowerCase() }}
        <hr/>
    </div>
</template>

<script setup>
// 千万别忘了引入pinyin-pro这个组件库
import { pinyin } from 'pinyin-pro';
</script>

<style scoped>

</style>

我这里用的vue3写的,根据自己框架安装--引入--使用即可

相关推荐
白白李媛媛10 小时前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
zm-v-1593043398613 小时前
ArcGIS 水文分析升级:基于深度学习的流域洪水演进过程模拟
人工智能·深度学习·arcgis
新中地GIS开发老师1 天前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
Cacciatore->1 天前
React 基本介绍与项目创建
前端·react.js·arcgis
杨超越luckly3 天前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
~央千澈~4 天前
UniApp完全支持快应用QUICKAPP-以及如何采用 Uni 模式开发发行快应用优雅草卓伊凡
arcgis
敲敲敲-敲代码4 天前
【ArcGIS10.2】网络数据集构建---最短路径分析
网络·arcgis
人工智能教学实践5 天前
【基于Echarts的地图可视化】
arcgis
Cacciatore->5 天前
Electron 快速上手
javascript·arcgis·electron
南草徽14 天前
arcgis分割 (Split)
arcgis