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写的,根据自己框架安装--引入--使用即可

相关推荐
中科GIS地理信息培训4 小时前
ArcGIS/ArcGIS Pro地震分析:为什么缅甸地震,我国瑞丽震感最强烈?
arcgis·arcgis pro
Z_W_H_4 小时前
ArcGIS Pro/GeoScene Pro AI 助手 2.1 安装教程
arcgis·ai·geoscene
Z_W_H_6 小时前
ArcGIS Pro/GeoScene Pro AI 助手 2.1
人工智能·arcgis·geoscene
岁月如歌,青春不败19 小时前
MaxEnt模型全解析:从原理到 R 语言实战,开启生态环境研究新视野
arcgis·r语言·生态学·论文写作·生态系统服务·物种分布·maxent模型
敲敲敲-敲代码2 天前
【ArcGIS】ArcGIS10.6彻底卸载和ArcGIS10.2安装全过程
arcgis
星火1913142 天前
arcgis jsapi 4.31 调用geoserver 发布的wms服务
arcgis·geoserver
规划GIS会3 天前
ima知识库第二弹,Python for ArcGIS Pro | 简简单单写个脚本工具
开发语言·python·arcgis
小艳加油3 天前
MaxEnt物种分布建模全流程;R+ArcGIS+MaxEnt模型物种分布模拟、参数优化方法、结果分析制图与论文写作
arcgis·r语言·物种分布模拟·maxent模型
生信学习小达人4 天前
在ArcGIS中导入气候tif文件出现 “输入与输出之间的基准面冲突” 警告
arcgis
敲敲敲-敲代码4 天前
【ArcGIS操作】ArcGIS 进行空间聚类分析
arcgis