拼音标注vue

使用到一个拼音标注的库，pinpy，这个库直接cnpm下载

cnpm install pinyin@alpha --save

<template>
    <div class="mainrouter" style="display: flex;">
        <!-- <div class="div-1">
            <div class="spell">
                shi
            </div>
            <div>
                时
            </div>
        </div> -->

        <!-- html5的样式,专门用来拼音标注的标签 -->
        <div style=" width: 49%;height: 100%;border-right: 1px blueviolet solid;">
            <ruby v-for="(item, index) in List" :key="index" class="div-1">
                {{ item.text }}
                <!-- 解决浏览器适配问题 -->
                <rp>(</rp>
                <rt class="spell">
                    {{ item.pinyin }}
                </rt>
                <rp>)</rp>
            </ruby>
        </div>
        <div style="width: 50%;height: 100%;">
            <el-button @click="search" style="margin: 10px;" type="primary">
                搜索
            </el-button>
            <!-- @input="validateInput" -->
            <el-input @input="validateInput" style="padding: 10px;" placeholder="请输入你要查询的文字" v-model="text" type="textarea"
                autosize></el-input>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import pinyin from 'pinyin'
const text = ref('')
const validateInput = () => {
    // 定义正则表达式，input第一个数字不允许输入数字
    const regex = /^[^\d\w]+$/;

    // 如果输入的文本不符合正则表达式，将其设置为空字符串
    if (!regex.test(text.value.split('')[0])) {
        text.value = '';
    }
}
//验证是否是英文
var pattern2 = new RegExp("[A-Za-z]+");
// 数字
var pattern3 = new RegExp("[0-9]+");
// 存放最终显示文字和拼音
const List = ref([])
// 存放显示文字的拼音
const pinyinText = ref([])
const search = () => {
    List.value = []
    pinyinText.value = []
    const zhon = pinyin(text.value, {
        heteronym: true,//启用多音字模式
        segment: true,//启用分词模式
    })
    // 存放文字
    const textList = text.value.split('')
    // const textList = splitChinese(text.value)
    console.log(textList);
    // 把拼音放进数组
    zhon.forEach(item => {
        pinyinText.value.push(item[0])
    })

    // 把文字和拼音放进数组
    for (var i = 0; i < textList.length; i++) {
        console.log(pinyinText.value[i]);
        List.value.push({
            text: textList[i],
            pinyin: pinyinText.value[i]
        })
        // if (!pattern3.test(textList[i]) && !pattern2.test(textList[i])) {
        //     List.value.push({
        //         text: textList[i],
        //         pinyin: pinyinText.value[i]
        //     })
        // } else {
        //     List.value.push({
        //         text: textList[i],
        //         pinyin: ''
        //     })
        // }
    }
}

//
function splitChinese(text) {
    var result = [];
    var chinese = '';

    for (var i = 0; i < text.length; i++) {
        var char = text.charAt(i);

        if (/[\u4e00-\u9fa5]/.test(char)) {
            if (chinese !== '') {
                result.push(chinese);
                chinese = '';
            }
            result.push(char);
        } else {
            chinese += char;
        }
    }

    if (chinese !== '') {
        result.push(chinese);
    }

    return result;
}


</script>
<style lang="scss">
.div-1 {
    margin-right: 3px;

    .spell {
        color: red;
    }
}
</style>