vue实现在线翻译功能

本文实例为大家分享了某视频剪辑软件实现在线翻译功能的具体代码，供大家参考，具体内容如下

最终效果：

APP.vue

模板div id='app' h4在线翻译/h4 h5简单/易用/方便/h5！-表单组件-翻译表单@ formSubmit='翻译文本'/翻译表单！-显示组件-翻译输出v-text='翻译文本'/翻译输出/div/模板脚本导入翻译表单自' ./components/translateForm "从导入翻译输出"。/components/translate output ' export default { name : ' App '，components: { TranslateForm，translateOutput }，data(){ return{ //翻译出的文字translatedText:'' } }，methods:{ //点击翻译事件translateText(文本，语言){ //alert(文本)这个$ http。get(' https://翻译。yandex。net/API/v 1.5/tr。JSON/翻译？key=trnsl。1 .1 .2017 07 21t 082515 z . 54 C3 DC 583 f 679 db。f4a 96182281281 D8 b 5 dfe 24 b4e 88298 e 2133 f 219 lang=' language ' text=' text ').然后((响应)={控制台。日志(响应。尸体。文本[0])//翻译结果这个。翻译文本=回应。尸体。文本[0]；//将翻译结果赋给文本框，传给子组件})} } }/脚本样式/风格表单组件translateForm.vue

模板！-表单组件-div id=' translate form ' form @ submit=' form submit '输入类型=“文本”占位符='输入需要翻译的内容v-model=' textTotranslate ' select name=' id=' v-model=' language '选项值=' en '英语/选项值=' ru '俄语/选项值=' ko '朝鲜语/选项/select输入类型='submit '值='翻译/form/div/template脚本导出默认值{ name : ' translate form '，data () { return { //用户输入的内容textTotranslate: ' '，//用户选择的语言language:'' } }，methods:{ //点击翻译传给父元素表单提交(e){此表单.$emit('formSubmit '，this.textTotranslate，this。语言)e . prevent default()；} } }/脚本样式范围/样式显示组件translateOutput.vue

模板！-显示组件-div id=' translate output ' { translate text } }/div/模板脚本导出默认值{ name : ' translate output '，prop :[' translate text ']，data(){ return } }/脚本样式范围/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。