使用Vue实现的在线翻译（附带源码） |
您所在的位置：网站首页 › 浏览器翻译器在线翻译 › 使用Vue实现的在线翻译（附带源码） |
使用Vue实现的在线翻译（附带源码）
1.预览
在线翻译的项目地址 2.实现思路我的项目结构： 具体的实现思路是，在InputForm组件中输入要查询的语句，选择要翻译成的语言，然后将语句传递给根组件，在根组件中，调用接口进行查询，然后将结果传递给OutputForm.vue组件显示。 3.具体实现 1.App.vue 1.引入两个子组件 import InputForm from './components/InputForm' import OutputForm from './components/OutputForm' 2.在页面中调用子组件 3.使用接口进行查询 getInputText(text, lang){ this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20190929T080118Z.4d67d1a58a417067.bc7ee7d17c7ba88f7b74ef8c638e35925339d6c5&lang='+lang+'&text='+text).then((response)=>{ this.result = response.body.text[0]; }) }text代表要查询的语句，lang代表要翻译成的语言，这两个属性都是从InputForm组件中传递来的。 getInputText()是翻译按钮的触发事件，将result传给OutputForm组件。 2.InputForm.vue输入表单中绑定的提交事件： formSubmit(e){ this.$emit("formSubmit", this.transtext, this.lang);//事件注册 e.preventDefault(); } 3.OutputForm.vue export default { name: 'OutputForm', props:["result"], methods:{ getPaste(){ document.querySelector('#input').select(); document.execCommand('copy'); } } }result从根组件中获取，可在页面内直接进行使用。 getPaste()实现了对查询结果的复制，可将查询结果复制到剪贴板。 |
App.vue是根组件，在该页面中引用两个子组件，InputForm.vue是左侧的输入组件，右侧OutputForm.vue是右侧的输出结果组件。【本文地址】
今日新闻 |
推荐新闻 |