vue 在线翻译

 

在线demo：

http://tangyupeng.top/dist/index.html#/translation

在线翻译调用免费AP Ihttps://tech.yandex.com/

vue框架 element-ui

效果实现

创建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>