vue实现在线翻译功能
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
本文实例为大家分享了vue实现在线翻译功能的具体代码,供大家参考,具体内容如下
最终效果:
APP.vue
<template> <div id="app"> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'></translateForm> <!-- 显示组件 --> <translateOutput v-text='translatedText'></translateOutput> </div> </template> <script> 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.net/api/v1.5/tr.json/translate"htmlcode"><template> <!-- 表单组件 --> <div id="translateForm"> <form @submit="formSubmit" > <input type="text" placeholder='输入需要翻译的内容' v-model="textTotranslate"> <select name="" id="" v-model="language"> <option value="en">English</option> <option value="ru">Russian</option> <option value="ko">Korean</option> </select> <input type="submit" value="翻译"> </form> </div> </template> <script> export default { name: 'translateForm', data () { return { //用户输入的内容 textTotranslate:"", //用户选择的语言 language:"" } }, methods:{ //点击翻译传给父元素 formSubmit(e){ this.$emit("formSubmit",this.textTotranslate,this.language) e.preventDefault(); } } } </script> <style scoped> </style>显示组件 translateOutput.vue
<template> <!-- 显示组件 --> <div id='translateOutput'> {{translatedText}} </div> </template> <script> export default { name: 'translateOutput', props:[ 'translatedText' ], data () { return { } } } </script> <style scoped> </style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:webpack 处理CSS资源的实现