vue3的中文转拼音库

qq_935417654

已于 2024-06-27 16:30:48 修改

阅读量294

点赞数 1

分类专栏：前端vue 文章标签： vue.js elementui 前端

于 2024-06-27 16:29:08 首次发布

本文链接：https://blog.csdn.net/qq_35013224/article/details/140016823

版权

前端vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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('')
}

点击按钮即可将中文名转换为拼音名