1、安装
# NPM
$ npm install pinyin-pro --save
# Yarn
$ yarn add pinyin-pro
# pnpm
$ pnpm install pinyin-pro
# 也可以通过浏览器的 script 标签导入 CDN 文件使用
在vue3.2中
<el-form :model="editObj" :rules="rules" label-width="90px">
<el-form-item label="姓名">
<el-input v-model="editObj.nickname" type="text" placeholder="请输入姓名,例如:张三">
<template #append>
<el-button type="primary" @click="getPinyin">点击翻译用户名</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="用户名" required>
<el-input v-model="editObj.username" type="text" placeholder="请输入用户名,例如:zhangsan" />
</el-form-item>
</el-form>
import { pinyin } from 'pinyin-pro'
const editObj = ref({})
const getPinyin = () => {
editObj.value.username = pinyin(editObj.value.nickname, { toneType: 'none', type: 'array' }).flat().join('')
}
点击按钮即可将中文名转换为拼音名