index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>online</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
// npm install vue-resource --save
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
TranslateForm.vue
<template>
<div class="row" id="translateForm">
<div class="col-md-6 col-md-offset-3" style="margin:0 auto;display:flex;">
<form
id="transForm"
class="well form-inline bg-light btn-lg"
@submit="formSubmit"
style="margin:0 auto;"
>
<input class="form-control" type="text" placeholder="输入需要翻译的内容" v-model="textToTranslate" />
<select class="form-control" v-model="language">
<option value="en">English</option>
<option value="ru">Russian</option>
<option value="ko">Korean</option>
<option value="ja">Japanese</option>
</select>
<input class="btn btn-info" type="submit" value="翻译" />
</form>
</div>
</div>
</template>
<script>
export default {
name: "translateForm",
data: function() {
return {
textToTranslate: "",
language: ""
};
},
methods: {
formSubmit(e) {
// alert("Hello world!");
// alert(this.textToTranslate);
this.$emit("formSubmitcc", this.textToTranslate, this.language); //传值
e.preventDefault();
}
},
created() {
this.language = "en";
}
};
</script>
<style>
#transForm {
border-radius: 10px;
border: 1px solid #ccc;
}
</style>
TranslateOutput.vue
<template>
<div id="translateOutput">
<h2>{{translatedText}}</h2>
</div>
</template>
<script>
export default {
name: "translateOutput",
props: ["translatedText"]
};
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<h1>在线翻译</h1>
<h5 class="text-muted">简单 / 易用 / 便捷</h5>
<translateForm @formSubmitcc="translateText"></translateForm>
<translateOutput v-text="translatedText"></translateOutput>
</div>
</template>
<script>
import TranslateForm from "./components/translateForm";
import TranslateOutput from "./components/translateOutput";
export default {
name: "App",
data: function() {
return {
translatedText: ""
};
},
components: {
TranslateForm,
TranslateOutput
},
methods: {
translateText(text, language) {
// alert("heccllo");
// alert(text);
// 此处涉及到 Yandex Technologies 网站
this.$http.get("https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20190913T144656Z.9cd9334dd531fd07.a9f5a203d4356c35e32b20d80d71c7654751dedf&lang=" + language + "&text=" + text)
.then(response => {
// console.log(response.body.text[0]);
this.translatedText = response.body.text[0];
});
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>