Vue（三十三）國際化解決方案

時間 2019-12-06

標籤 vue 三十三國際化解決方案简体版

原文原文鏈接

摘自：http://www.javashuo.com/article/p-cjmpfnps-mx.htmljavascript

（1）第一種方式：中英文兩套頁面css

　　優勢：技術含量最低html

　　缺點：佔內存，響應慢，麻煩vue

（2）第二種方式：谷歌插件java

　　優勢：簡單快捷，利用谷歌翻譯jquery

　　缺點：翻譯不徹底準確，並且有谷歌的搜索欄，不是很好app

　　實現方法：測試

<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>

<script>
        function googleTranslateElementInit() {
         
            new google.translate.TranslateElement(
                {
                    //pageLanguage: 'en',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                }, 
                'google_translate_element'
            );
         
        }
    </script>
    <script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

（3）第三種方式：插件translate.js網站

　　優勢：簡單ui

　　缺點：不適合大型網站

　　實現方法：

　　https://wangchujiang.com/translater.js/

　　在頁面上出現中文的地方寫上中文和英文兩種註釋，而後經過切換來達到翻譯頁面的目的（Jquery）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/translater.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        button{margin-top: 1rem;}
        span{margin-top: 1rem;color: crimson;}
        div{margin-top: 1rem;}
        a{margin-top: 1rem;}
        input{margin-top: 1rem;}
    </style>
    <body>
        <span>
            切換語言：
            <!--{cn}切換語言：-->
            <!--{en}switch the language：-->
        </span>
        <a href="javascript:tran.setLang('en');">English</a>
        <a href="javascript:tran.setLang('cn');">中文</a> 
        <select name="language" id="languager">
        <option value="chinese">
            中文
            <!--{cn}中文-->
            <!--{en}Chinese-->
        </option>
        <option value="english">
            英文
            <!--{cn}英文-->
            <!--{en}English-->
        </option>
        </select><br />
        <span>
            按鈕：
            <!--{cn}按鈕：-->
            <!--{en}button：-->
        </span>
        <button id='btn-addAlarmToEvent' type="button" class="btn btn-success">刪除
        <!--{cn}刪除-->
        <!--{en}delete-->
        </button><br /><br />
        
        <span>
            段落：
            <!--{cn}段落：-->
            <!--{en}paragraph：-->
        </span>
        <p>這是一段話
            <!--{cn}這是一段話-->
            <!--{en}This is a word-->
        </p><br />
        
        <div id="test">
        <span>
                層級：
                <!--{cn}層級：-->
                <!--{en}tier：-->
        </span>
               這是一個層級    
        </div><br />
        <span>
            另外一個層級：
            <!--{cn}另外一個層級：-->
            <!--{en}other tier：-->
        </span>
        <div id="test1">
         
        </div><br />
        <span>
            超連接：
            <!--{cn}超連接：-->
            <!--{en}href：-->
        </span>
        <a href="">
            點擊測試
            <!--{cn}點擊測試-->
            <!--{en}click Test-->
        </a><br />
        <span>
            超連接：
            <!--{cn}超連接：-->
            <!--{en}href：-->
        </span>
        <!--第三種寫法的，將語種做爲參數傳遞-->
        <a href="test.html?lang=jp">
            點擊進日語
            <!--{cn}點擊進入日語-->
            <!--{en}click into jp-->
        </a>
        <span>
            輸入框：
            <!--{cn}輸入框：-->
            <!--{en}input：-->
        </span>
        <!--這個怎麼實現切換語言我沒解決-->
        <input type="submit" id="tj" name="" value="提交" />
        <input type="button" name="an" id="" value="這是一個按鈕" />
    </body>
    <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
         /* 初始化翻譯的js，第一種寫法，用href連接切換語種 */
         var tran = new Translater({
         });
         /* 第二種用法，其實都是同樣，都是將默認的語種改成用戶須要的語種 */
         $('#test').append("<!--{cn}這是一個測試--><!--{en}This is a test-->");
         $('#test1').text("這是層級的另外一種寫法").append("<!--{cn}這是層級的另外一種寫法--><!--{en}This is another way of writing the tier-->")
         $("#languager").on("change", function(e){
        var language=$(this).val();
        if(language=="chinese"){
            var tran;
            tran = new Translater();
            if (tran.getLang() === "default") tran.setLang('cn');
            var tran = new Translater({
                lang:"cn"
            });
        }else{
            var tran;
            tran = new Translater();
            if (tran.getLang() === "default") tran.setLang('en');
            var tran = new Translater({
                lang:"en"
            });
        }
    }); 
    </script>
</html>