Vue 组件封装 | 给汉字注音（带声调），内含汉字转拼音（带声调/不带声调），获取汉字首字母的方法

目录

​​s-pinyin 组件封装​​

​​相关参数​​

<s-pinyin content="我们都有一个家，名字叫中国。"></s-pinyin>

s-pinyin 组件封装

 其中使用了 pinyin_withtone.js ，

​

百度网盘下载链接：​​https://pan.baidu.com/s/19hqkesGYOn5JSXW_fCXGBA​​        提取码：7wj9 

导入pinyin_withtone.js 

import {pinyinUtil} from './utils/pinyin_withtone.js'

pinyinUtil 对外提供以下方法，其中char 为传入的汉字

• 获取汉字拼音的首字母（默认大写）   pinyinUtil.getFirstLetter(char)
• 获取汉字的拼音（带声调）                 pinyinUtil.getPinyin(char, ' ', true)
• 获取汉字的拼音（无声调）                 pinyinUtil.getPinyin(char, ' ', false)

<template>
    <div class="s-pinyin">
        <div class="wordBox" v-for="(item,index) in list" :key="index">
            <ruby>{{item['汉字']}}
                <rt>{{item['拼音']}}</rt>
            </ruby>
        </div>
    </div>
</template>
<script>
    import {pinyinUtil} from './utils/pinyin_withtone.js'

    export default {
        name: "s-pinyin",
        props: {
            content: String,
            withTone: {
                type: Boolean,
                default: true
            },
            firstLetter: {
                type: Boolean,
                default: false
            },
        },
        mounted() {
            for (let char of this.content) {
                let pinyin = ''
                // 判断是否为汉字
                var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                if (reg.test(char)) {
                    if (this.firstLetter) {
                        // 获取汉字拼音的首字母（默认大写）   pinyinUtil.getFirstLetter(char)
                        pinyin = pinyinUtil.getFirstLetter(char)
                    } else {
                        // 获取汉字的拼音（带声调） pinyinUtil.getPinyin(char, ' ', true)
                        // 获取汉字的拼音（无声调）  pinyinUtil.getPinyin(char, ' ', false)
                        pinyin = pinyinUtil.getPinyin(char, ' ', this.withTone)
                    }
                }
                this.list.push(
                    {
                        "汉字": char,
                        "拼音": pinyin
                    }
                )
            }
        },
        data() {
            return {
                list: []
            }
        }
    }
</script>
<style scoped>
    .s-pinyin {
        margin: 5px;
    }

    .wordBox {
        width: 2.2em;
        display: inline-block;
        text-align: center;
    }
</style>

相关参数