汉语标注拼音

<template>
    <div id="app">

        <div class="line">
            <div class="item">
                <div class="label">中文</div>

                <div
                    style="font-size: 18px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
                    {{ cnText }}
                </div>

            </div>
            <div class="item">
                <div class="label">拼音</div>
                <div v-html="enText" style="font-size: 18px;font-family: Georgia, 'Times New Roman', Times, serif;">
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
//引入方法
import ChineseHelper from '@/libs/ChineseHelper.js'
import pinyin from "pinyin";
export default {
    name: 'App',
    components: {

    },
    data() {
        return {
            cnText: `不让你累的感情，就是两个人在一起的时候，有一种自然而然舒适氛围，能够消解心里的那些戾气，恢复成最放松而且淡然的自己。世上太多的分离，不是因为不爱了，而是因为累了。爱上一个不该爱的人，会很痛（痛彻心扉的心情感悟）;
            看似没心没肺的人其实挺容易感伤，都压在很深的地方。 碰到一点阳光，碰到一点相似的情节，碰到一点熟悉的背影甚至碰到一点眉眼，就会不知所措地惊慌逃亡。爱上一个不该爱的人，会很痛（痛彻心扉的心情感悟）;
            一个对你不好的人，你一定要学会放下，不要为TA的任何事情，任何言行而痛苦。你要想，如果TA爱你，一定不忍心对你不好，所以结论就是，TA不够爱你，或者TA根本不爱你，对于一个不爱你的人，有什么必要为TA烦恼，为TA伤心呢，就是个路人甲罢了。
            爱上一个不该爱的人，就像用手握住一只刺猬一样。痛，但又放不下，怕它掉下去之后会怎样，所以一直紧握着它，而它被你捏得很痛，你却自私地以为这就是爱。直到有一天，当你知道你的爱只会给它带来伤害，而它也不需要你的爱的时候，你就会明白，原来还有一种爱，叫做放手。`,
            enText: ''
        }
    },
    mounted() {
        let str = "";
        for (var i in this.cnText) {
            console.log(this.cnText[i])
            str += ` <ruby>
            ${this.cnText[i]}
            <rp>(</rp>
            <rt>${pinyin(this.cnText[i], { segment: "@node-rs/jieba", group: true, compact: true })}</rt>
            <rp>)</rp>
        </ruby>`
        }
        this.enText = str;
    },
    methods: {
        /**
         * 失去焦点进行转换
         */
        cnToEn(cn) {
            this.enText = ChineseHelper.ConvertPinyin(cn)
        }
    }
}
</script>
  
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.label {
    font-size: 30px;
    font-weight: bold;

}

.item {
    margin-top: 50px;
}

.line {
    width: 800px;

}
</style>
  

https://pinyin.js.org/readme-v2拼音文档