<h1 id="articleHeader0">multi-lang-js</h1> <p>前端JavaScript多语言加载器,前端部署好各个语言的json或txt语言包,可结合vue等使用。</p> <p>多语言,不就从浏览器<code>navigator.language</code>里拿信息么,前端也可以。借此做一个前端语言包加载器。</p> <h2 id="articleHeader1"><strong>demo示例</strong></h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app_lang&quot;> <h1>{{ langContent.title }}</h1> <h1>{{ langContent.name1 }}</h1> <h1>{{ langContent.name2 }}</h1> <h1>{{ langContent.name3 }}</h1> </p></div> <p><script src=&quot;js/vue.min.js&quot;></script><br /> <script src=&quot;js/multi-lang.js&quot;></script><br /> <script> var vue_app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app_lang', data: { langContent: { // } } }) var multiLang = new MultiLang() // 1: //2:import multiLang from 'multi-lang-js'; //or //3:var multiLang = require('multi-lang-js'); multiLang.init({ path: 'css/', name: { 'en': 'lang_en.txt', 'cn': 'lang_cn.txt', 'tw': 'lang_cn.txt', 'th': 'lang_th.txt', 'vn': 'lang_vn.txt', 'ru': 'lang_ru.txt', 'ko': 'lang_ko.txt' }, callback: function (data, langName) { vue_app.langContent = data if (langName === 'en') { //某个语言你需要再特殊处理的话 } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app_lang"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ langContent.title }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ langContent.name1 }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ langContent.name2 }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ langContent.name3 }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/multi-lang.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> vue_app = <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app_lang'</span>, data: { langContent: { <span class="hljs-comment">//</span> } } }) <span class="hljs-keyword">var</span> multiLang = <span class="hljs-keyword">new</span> MultiLang() <span class="hljs-comment">// 1:</span> <span class="hljs-comment">//2:import multiLang from 'multi-lang-js';</span> <span class="hljs-comment">//or</span> <span class="hljs-comment">//3:var multiLang = require('multi-lang-js');</span> multiLang.init({ path: <span class="hljs-string">'css/'</span>, name: { <span class="hljs-string">'en'</span>: <span class="hljs-string">'lang_en.txt'</span>, <span class="hljs-string">'cn'</span>: <span class="hljs-string">'lang_cn.txt'</span>, <span class="hljs-string">'tw'</span>: <span class="hljs-string">'lang_cn.txt'</span>, <span class="hljs-string">'th'</span>: <span class="hljs-string">'lang_th.txt'</span>, <span class="hljs-string">'vn'</span>: <span class="hljs-string">'lang_vn.txt'</span>, <span class="hljs-string">'ru'</span>: <span class="hljs-string">'lang_ru.txt'</span>, <span class="hljs-string">'ko'</span>: <span class="hljs-string">'lang_ko.txt'</span> }, callback: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data, langName)</span> </span>{ vue_app.langContent = data <span class="hljs-keyword">if</span> (langName === <span class="hljs-string">'en'</span>) { <span class="hljs-comment">//某个语言你需要再特殊处理的话</span> } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader2"><strong>初始化multiLang.init()</strong></h2> <table> <thead> <tr> <th align="left">参数名</th> <th align="left">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="left">path</td> <td align="left">str</td> <td>翻译文本的相对路径,这里我把所有翻译文本放到css文件夹下</td> </tr> <tr> <td align="left">dataType</td> <td align="left">str</td> <td>值为 txt 或者json。可忽略此参数,默认为json,值为txt时,则返回的是txt文本</td> </tr> <tr> <td align="left">name</td> <td align="left">obj</td> <td>各个语言对应加载的翻译文本,属性名不可改,对应的文本名字可以改</td> </tr> <tr> <td align="left">callback</td> <td align="left">fun</td> <td>回调的第一个参数是加载到的json(或者文本)数据,第二个数据是当前客户端的语言名字</td> </tr> </tbody> </table> <h2 id="articleHeader3"><strong>设置语言multiLang.setLang(langname,callback)</strong></h2> <p><strong>如果你觉得multiLang.setLang 使用麻烦,也可以:localStorage.lang=langname,这种写法 </strong></p> <blockquote> <p>注意:设置语言,会让全站语言都立马改动,demo可参考github上的页面。<br /><strong>开多个页签试试</strong> <a href="https://diyao.github.io/multi-lang-js/" rel="nofollow noreferrer" target="_blank">https://diyao.github.io/multi...</a></p> </blockquote> <table> <thead> <tr> <th align="left">参数名</th> <th align="left">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="left">langname</td> <td align="left">str</td> <td>必须设置,你要设置的语言名</td> </tr> <tr> <td align="left">callback</td> <td align="left">function</td> <td>可选的回调函数</td> </tr> </tbody> </table> <h2 id="articleHeader4"><strong>测试</strong></h2> <p>初始化判断当前是何种语言的逻辑:先查浏览器地址栏lang 参数,其次查 localStorage.lang的值,最后看浏览器语言</p> <blockquote> <p>所以为了测试预览,你可以在地址后带入参数,lang=en(你想要的语言 ru、ko、th等)。</p> </blockquote> <p><a href="https://diyao.github.io/multi-lang/" rel="nofollow noreferrer" target="_blank">https://diyao.github.io/multi...</a></p> <h2 id="articleHeader5"><strong>说明</strong></h2> <p>如果你配置的name中,没有(比如当前埃及用户访问),则默认会加载英文的显示。</p> <h2 id="articleHeader6"><strong>前端多语言加载器的特点</strong></h2> <p>切换语言,不用刷新页面,语言包biu的一下就替换了。某个页签切换语言,全站其他页签biu的一下,全都换了</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install multi-lang-js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> multi-lang-js </code></pre> <p><a href="https://www.npmjs.com/package/multi-lang-js" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16364.html