admin管理员组文章数量:1531699
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/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()实现了对查询结果的复制,可将查询结果复制到剪贴板。
版权声明:本文标题:使用Vue实现的在线翻译(附带源码) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725598477a1032152.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论