vue 在线翻译

忘是亡心i 2021-09-16 13:28 304阅读 0赞

在线demo：

[http://tangyupeng.top/dist/index.html\#/translation][http_tangyupeng.top_dist_index.html_translation]

在线翻译调用免费AP I[https://tech.yandex.com/][https_tech.yandex.com]

vue框架 element-ui

效果实现

![70][]

创建translateform.vue，translateOutput.vue，translation.vue

***translation.vue***

translation.vue
    
    
    <template>
      <div id="translation">
        <br><br><br>
        <h1>在线翻译</h1>
        <h5 class="text-muted" style="color: #409EFF">简单/易用/便捷</h5>
        <br><br><br>
        <translationform @formSubmitr="translateText"></translationform>
        <translateOutput v-text="translatedText"></translateOutput>
      </div>
    </template>
    
    <script>
    import  translationform  from "./translateform"
    import  translateOutput  from "./translateOutput"
    import { Indicator } from 'mint-ui';
    import { Loading } from 'element-ui';
    export default {
      name: 'translation',
      data:function(){
        return {
          translatedText:""
        }
      },
      components:{
        translationform,translateOutput
      },
      methods:{
        translateText:function(text,lange){
          console.log(text);
          if(text==""){
              this.$notify({
                title: '警告',
                message: '请输入需要翻译的内容',
                type: 'warning'
              });
          }else{
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
          this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180930T033145Z.a4faa2bac67b5b99.7252acb5de45d1bae581d5f43fb44ed779f49fdc&lang='+lange+'&text='+text)
          .then((response)=>{
            loading.close();
            console.log(response.body.text[0])
            this.translatedText=response.body.text[0]
          })
          }
         
        }
      }
    }
    </script>
    
    <style>
    *{padding: 0;margin: 0;}
    </style>

translateform.vue

translateform.vue
    
    
    
    
    <template>
      <div class="row" id="Translationform">
      	<div class="col-md-6 col-md-offset-3">
      		<el-row>
    		  <el-col :span="12" :offset="6">
    		  	<div class="grid-content bg-purple-dark">
    				<el-form ref="form" :model="form" label-width="80px" >
    				  <form class="well form-inline" style="display: flex;">
    			    	<el-input type="text" class="form-control"  placeholder="请输入需要翻译的内容" v-model="texttotranslate"></el-input>
    			    	<el-select class="form-control" name="" id="" v-model="lange">
    			    		<el-option label="中文" value="ZH"></el-option>
    			    		<el-option label="英语" value="en"></el-option>
    				      <el-option label="Russian" value="ru"></el-option>
    				      <el-option label="韩语" value="ko"></el-option>
    				      <el-option label="日语" value="ja"></el-option>
    			    	</el-select>
    			    	<el-row>
    					  <el-button type="primary" @click="formsubmit">确认翻译</el-button>
    					</el-row>
    			    </form>
    				</el-form>
    			  </div>
    			</el-col>
    		</el-row>
      	</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Translationform',
      data:function(){
      		return {
      			texttotranslate:"",
      			lange:"",
      			form: {
    	          name: '',
    	        }
      		}
      },
      methods:{
      	formsubmit:function(e){
      		e.preventDefault();
      		this.$emit("formSubmitr",this.texttotranslate,this.lange);
      	}
      },
      created:function(){
      	this.lange="en"
      }
    
    }
    </script>
    
    <style>
    *{padding: 0;margin: 0;}
    .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    </style>

translateOutput.vue

translateOutput.vue
    
    
    
    <template>
      <div id="translationput">
      	<div class="textbox">
      		<h2>{
       {translatedText}}</h2>
      	</div>
        
      </div>
    </template>
    
    <script>
    export default {
      name: 'translationput',
      props:[
      	"translatedText"
      ]
    }
    </script>
    
    <style>
    *{padding: 0;margin: 0;}
    .textbox{width: 300px; height: 300px; border: 1px solid #ccc;}
    </style>

[http_tangyupeng.top_dist_index.html_translation]: http://tangyupeng.top/dist/index.html#/translation
[https_tech.yandex.com]: https://tech.yandex.com/
[70]: /images/20210724/e5df58d0db004a3f98acffdae0f537c8.png