i18n数据自动转化工具

效果：

代码：

<template><div id="app"><buttonstyle="margin-top: 20px;width: 100px;height: 50px;background-color: #41b883;color: #fff;border: none;border-radius: 4px;font-size: 16px;"@click="handleClick">转化</button><div class="container"><div class="left-con1"><textareav-model="textChinese"rows="100"cols="50"placeholder="请输入内容..."></textarea></div><div class="left-con1"><textareav-model="textEnglish"rows="100"cols="50"placeholder="请输入内容..."></textarea></div><div class="right-con1"><textareav-model="getTextChinese"rows="100"cols="50"placeholder="获取到的中文内容..."></textarea></div><div class="left-con1"><textareav-model="getTextEnglish"rows="100"cols="50"placeholder="获取到的英文内容..."></textarea></div></div></div>
</template><script>
export default {name: "App",components: {},data() {return {textChinese: "",textEnglish: "",getTextChinese: "",getTextEnglish: "",};},methods: {// 定义生成键名的函数generateKey(name) {const words = name.split(" ");if (words.length === 1) {// 单词数量为 1，首字母小写return words[0].toLowerCase();} else {// 单词数量大于 1，第一个字母小写，后面的首字母大写return (words[0].toLowerCase() +words.slice(1).map((word) =>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(""));}},handleClick() {const chinese = this.textChinese.split("\n");const english = this.textEnglish.split("\n");// 创建对象来保存最终的键值对let result = {};// 遍历英文数组，将每个英文单词生成键名，并与中文文本对应for (let i = 0; i < english.length; i++) {const key = this.generateKey(english[i]);result[key] = chinese[i];}// 自定义输出格式：英文键名: '中文值',let resultStringZH = "";for (let key in result) {resultStringZH += `${key}: '${result[key]}',\n`;}this.getTextChinese = resultStringZH;console.log(resultStringZH);let resultEN = {};// 遍历英文数组，将每个英文单词生成键名，并与中文文本对应for (let i = 0; i < english.length; i++) {const key = this.generateKey(english[i]);resultEN[key] = english[i];}let resultStringEN = "";for (let key in resultEN) {resultStringEN += `${key}: '${resultEN[key]}',\n`;}this.getTextEnglish = resultStringEN;console.log(resultStringEN);},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.container {display: flex;justify-content: center;align-items: center;height: 85vh;width: 100%;
}
.left-con1 {width: 45%;height: 90%;background-color: #f5f5f5;display: flex;justify-content: center;align-items: center;flex-direction: column;
}
.right-con1 {margin-left: 20px;width: 45%;height: 90%;background-color: #f5f5f5;display: flex;justify-content: center;align-items: center;flex-direction: column;
}
</style>