| 1 |
- System.register(["./vendor-legacy.44d419bd.js"],(function(s){"use strict";var n,a,l;return{setters:[function(s){n=s.e,a=s.o,l=s.G}],execute:function(){const p={class:"markdown-body"},t=[l('<h1>国际化（3.0开发中）</h1><p>NutUI 3.0 以上版本支持多语言。组件默认使用中文，支持加载其他语言包来实现多语言切换功能。除了组件本身的语言切换以外，用户还可以调用相关的语言转换方法来支持其他功能的国际化。具体使用方法如下：</p><h2>使用方法</h2><h3>引用整个组件库</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> NutUI <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">import</span> enUS <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui/dist/locales/lang/en-US'</span>;\n\nVue.use(NutUI, {\n <span class="hljs-attr">locale</span>: <span class="hljs-string">'en-US'</span>,\n <span class="hljs-attr">lang</span>: enUS\n});\n</code></pre><h3>按需引用组件</h3><p>通过 <strong><a href="https://www.npmjs.com/package/@nutui/babel-plugin-separate-import">@nutui/babel-plugin-separate-import</a></strong> 插件，我们可以根据项目需要引用 NutUI 的组件，最终只打包引用的组件，减少引入代码的体积。国际化功能同样支持按需引用的方式。</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> {locale} <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">import</span> enUS <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui/dist/locales/lang/en-US'</span>;\n\nlocale(<span class="hljs-string">'en-US'</span>, enUS);\n</code></pre><blockquote><p>请注意：通过该插件进行按需引用组件时默认引用的是构建后的文件，此时并不支持国际化的功能。如需使用组件库的国际化功能，需要在 babel 的配置文件（如.babelrc）中将 <strong>@nutui/babel-plugin-separate-import</strong> 插件的 <strong>sourceCode</strong> 参数值设为 <strong>true</strong> 。这样插件将引用未经构建的源文件，同时引用的组件也不再具有 <code>install</code> 方法，请使用 <code>Vue.component</code> 对组件进行注册。</p></blockquote><pre><code class="language-bash">{\n <span class="hljs-string">"plugins"</span>: [\n [<span class="hljs-string">"@nutui/babel-plugin-separate-import"</span>, {\n <span class="hljs-string">"sourceCode"</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-string">"style"</span>: <span class="hljs-string">"css"</span>\n }]\n ]\n}\n</code></pre><h2>兼容 vue-i18n</h2><pre><code class="language-javascript"><span class="hljs-keyword">import</span> VueI18n <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-i18n'</span>;\n<span class="hljs-keyword">import</span> enUS <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui/dist/locales/lang/en-US'</span>;\n\nVue.use(VueI18n);\n\nVue.locale = <span class="hljs-function">() =></span> {};\n<span class="hljs-keyword">const</span> i18n = <span class="hljs-keyword">new</span> VueI18n({\n <span class="hljs-attr">locale</span>: <span class="hljs-string">'en-US'</span>,\n <span class="hljs-attr">messages</span>: {\n <span class="hljs-string">'en-US'</span>: enUS\n }\n});\n\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue({\n <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,\n i18n\n})\n\n</code></pre><h2>语言切换</h2><p>使用 <strong>vue-i18n</strong> 时，可以通过调用 <strong>$t</strong> 方法来对某个位置做国际化支持的语言切换。我们也可以调用 NutUI 内置的语言切换方法 <strong>nutTranslate</strong> 来实现相同功能，而且还支持非常灵活的模板化传参方式。我们可以通过 <strong>mixin</strong> 将该语言切换方法混入到每个组件的 <strong>methods</strong>，方便直接调用。</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> {i18n} <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\nVue.mixin({\n <span class="hljs-attr">methods</span>: {\n <span class="hljs-function"><span class="hljs-title">nutTranslate</span>(<span class="hljs-params"></span>)</span> {\n <span class="hljs-keyword">return</span> i18n.apply(<span class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span>);\n }\n }\n});\n\n\n<span class="hljs-comment">// 使用 nutTranslate</span>\n<span class="hljs-comment">// params 参数支持默认值、对象、数组、函数等格式</span>\n<span class="xml"><span class="hljs-tag"><<span class="hljs-name">nut-cell</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"nutTranslate('demo.cell.title', params)"</span> /></span></span>\n</code></pre><p>一般来说，要实现全面的国际化，我们还需要将用户自己的语言包与组件库的语言包进行合并。</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> {locale} <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-keyword">import</span> enUS <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui/dist/locales/lang/en-US'</span>;\n<span class="hljs-keyword">import</span> myEnUS <span class="hljs-keyword">from</span> <span class="hljs-string">'./path/to/lang/en-US'</span>;\n\n<span class="hljs-built_in">Object</span>.assign(enUS, myEnUS);\n\nlocale(<span class="hljs-string">'en-US'</span>, enUS);\n</code></pre>',17)];s("default",{setup:(s,{expose:l})=>(l({frontmatter:{}}),(s,l)=>(a(),n("div",p,t)))})}}}));
|
