首先說下，本人為在校大三狗一只，缺少實戰開發經驗，然后用語什么的也不標準，就按我自己的想法寫的，有什么不對的地方歡迎指導指導哈
然后直接開始吧
在需要翻譯的地方做上標記，這里用的是添加名為"text-dom"的class的方法。比如：
<div class="text-dom">原文：</div>
定義儲存數據的data
data() { return { before: { q: "", //輸入的原文 to: "" //選擇目標語言 }, //保存初始數據 appid: "2019*********2613", //百度翻譯開放平臺的個人AppId salt: "14*******88", //隨機數 q: "", //請求翻譯文本 from: "aotu", //源語言 to: "en", //目標語言 sign: "", //簽名 userkey: "y0Ly*********gJSAs", //百度翻譯開放平臺的個人密匙 fyjg: "" //翻譯結果 }; },頁面渲染完成時，獲取頁面上的待翻譯原文內容
mounted() { /* 獲取頁面所有原文本存放到數組 */ var textDomArr = new Array(); $(".text-dom").each(function() { textDomArr.push($(this).text()); }); /* 拼接所有原文本，并用@符號分隔*/ var textAllBefore = textDomArr.join("@"); /* 清除原文本其他符號 */ var textAll = textAllBefore.replace(/[：:/|///*^%$#/-]/g, ""); /* 儲存原文本到data中 */ this.before.q = textAll; },創建一個翻譯函數
methods: { fanyi() { /* 待翻譯文本 傳入url */ this.q = this.before.q; /* 從頁面獲取選擇的目標語言 傳入url */ this.to = this.before.to; /* md5加密，生成簽名 */ this.sign = md5(this.appid + this.q + this.salt + this.userkey); /* 對待翻譯字符做url編碼 */ this.q = encodeURIComponent(this.before.q); /* 請求翻譯 */ this.axios .get( "/sell/api/trans/vip/translate" + "?q=" + this.q + "&from=" + this.from + "&to=" + this.to + "&appid=" + this.appid + "&salt=" + this.salt + "&sign=" + this.sign ) /* 得到返回數據 */ .then(res => { this.fyjg = res.data.trans_result[0].dst; //得到翻譯結果 /* 把翻譯結果分割成數組 */ var yiwenArr = new Array(); yiwenArr = this.fyjg.split("@"); //console.log(yiwenArr); /* 用譯文替換頁面原文 */ var n = 0; $(".text-dom").each(function() { $(this).text(yiwenArr[n]); n++; }); }); } }html部分可以用select切換翻譯的目標語言
<select v-model="before.to" @change="fanyi()"> <option value="zh">簡體中文</option> <option value="cht">繁體中文</option> <option value="yue">粵語</option> <option value="en">英語</option> <option value="kor">韓語</option> <option value="jp">日語</option> <option value="fra">法語</option> </select>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
