admin管理员组文章数量:1530847
本文实例为大家分享了vue实现在线翻译功能的具体代码，供大家参考，具体内容如下
最终效果：
APP.vue
在线翻译
简单/易用/方便
import TranslateForm from './components/translateForm'
import translateOutput from './components/translateOutput'
export default {
name: 'App',
components:{
TranslateForm,translateOutput
},
data(){
return{
//翻译出的文字
translatedText:''
}
},
methods:{
//点击翻译事件
translateText(text,language){
// alert(text)
this.$http.get('https://translate.yandex/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang='
+language+'&text='+text)
.then((response)=>{
console.log(response.body.text[0]) //翻译结果
this.translatedText = response.body.text[0]; //将翻译结果赋给文本框，传给子组件
})
}
}
}
表单组件 translateForm.vue
English
Russian
Korean
export default {
name: 'translateForm',
data () {
return {
//用户输入的内容
textTotranslate:"",
//用户选择的语言
language:""
}
},
methods:{
//点击翻译传给父元素
formSubmit(e){
this.$emit("formSubmit",this.textTotranslate,this.language)
e.preventDefault();
}
}
}
显示组件 translateOutput.vue
{{translatedText}}
export default {
name: 'translateOutput',
props:[
'translatedText'
],
data () {
return {
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
版权声明：本文标题：vue 后台翻译_vue实现在线翻译功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725597855a1032068.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论