使用Vue实现的在线翻译（附带源码）

1.预览

在线翻译的项目地址

2.实现思路

我的项目结构：

App.vue是根组件，在该页面中引用两个子组件，InputForm.vue是左侧的输入组件，右侧OutputForm.vue是右侧的输出结果组件。

具体的实现思路是，在InputForm组件中输入要查询的语句，选择要翻译成的语言，然后将语句传递给根组件，在根组件中，调用接口进行查询，然后将结果传递给OutputForm.vue组件显示。

3.具体实现

1.App.vue

1.引入两个子组件

import InputForm from './components/InputForm'
import OutputForm from './components/OutputForm'

2.在页面中调用子组件

 <InputForm v-on:formSubmit="getInputText"></InputForm>
 <OutputForm v-bind:result="result"></OutputForm>

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

输入表单中绑定的提交事件：

<form v-on:submit="formSubmit">

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()实现了对查询结果的复制，可将查询结果复制到剪贴板。