blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/assets/reference_plugin_plugins_locale.md.c271ad1f.js

75 lines
29 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as s,o as a,c as l,V as n}from"./chunks/framework.b31a4d00.js";const B=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n(`<h1 id="fesjs-plugin-locale" tabindex="-1">@fesjs/plugin-locale <a class="header-anchor" href="#fesjs-plugin-locale" aria-label="Permalink to &quot;@fesjs/plugin-locale&quot;">​</a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to &quot;介绍&quot;">​</a></h2><p>国际化插件，基于 <a href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noreferrer">Vue I18n</a>，用于解决 i18n 问题。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to &quot;启用方式&quot;">​</a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">@fesjs/plugin-locale</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h2><h3 id="约定式配置" tabindex="-1">约定式配置 <a class="header-anchor" href="#约定式配置" aria-label="Permalink to &quot;约定式配置&quot;">​</a></h3><p>Fes.js 约定如下目录，项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">src</span></span>
<span class="line"><span style="color:#babed8;"> ├── locales</span></span>
<span class="line"><span style="color:#babed8;"> │ ├── zh-CN.js</span></span>
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
<span class="line"><span style="color:#babed8;"> │ └── index.vue</span></span>
<span class="line"><span style="color:#babed8;"> └── app.js</span></span></code></pre></div><p>多语言文件的命名规范：<code>&lt;lang&gt;-&lt;COUNTRY&gt;.js</code></p><p>多语言文件的内容规范：键值组成的字面量，如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/locales/zh-CN.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">接口</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">概述</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">国际化，基于</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">实现。</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">UI组件</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/locales/en-US.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">interface</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Overview</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">internationalization，base on</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">to achieve.</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">UI components</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>想了解更多语言信息配置、匹配规则，请参考 <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html" target="_blank" rel="noreferrer">Vue I18n</a> 文档。</p><h3 id="多层配置" tabindex="-1">多层配置 <a class="header-anchor" href="#多层配置" aria-label="Permalink to &quot;多层配置&quot;">​</a></h3><p>如果国际化内容较多，希望模块化配置，则可以这样：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">src</span></span>
<span class="line"><span style="color:#babed8;"> ├── locales</span></span>
<span class="line"><span style="color:#babed8;"> │ ├── zh-CN.js</span></span>
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
<span class="line"><span style="color:#babed8;"> | └── system</span></span>
<span class="line"><span style="color:#babed8;"> | ├── zh-CN.js</span></span>
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
<span class="line"><span style="color:#babed8;"> │ └── index.vue</span></span>
<span class="line"><span style="color:#babed8;"> └── app.js</span></span></code></pre></div><p>插件会把相同语言的配置合并在一起！</p><h3 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to &quot;编译时配置&quot;">​</a></h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>默认配置为：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// default locale</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">fallbackLocale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// set fallback locale</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">baseNavigator</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 开启浏览器语言检测</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">legacy</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 用户是否需要 Legacy API 模式</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>所有配置项如下：</p><h4 id="locale" tabindex="-1">locale <a class="header-anchor" href="#locale" aria-label="Permalink to &quot;locale&quot;">​</a></h4><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>zh-CN</code></p></li><li><p><strong>详情</strong>：当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1">fallbackLocale <a class="header-anchor" href="#fallbacklocale" aria-label="Permalink to &quot;fallbackLocale&quot;">​</a></h4><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>zh-CN</code></p></li><li><p><strong>详情</strong>：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1">baseNavigator <a class="header-anchor" href="#basenavigator" aria-label="Permalink to &quot;baseNavigator&quot;">​</a></h4><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：开启浏览器语言检测。</p></li></ul><p>默认情况下，当前语言环境的识别按照：<code>localStorage</code> 中 <code>fes_locale</code> 值 &gt; 浏览器检测 &gt; <code>default</code> 设置的默认语言 &gt; <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1">legacy <a class="header-anchor" href="#legacy" aria-label="Permalink to &quot;legacy&quot;">​</a></h4><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详情</strong>：用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1">运行时配置 <a class="header-anchor" href="#运行时配置" aria-label="Permalink to &quot;运行时配置&quot;">​</a></h3><p>暂无。</p><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="locale-1" tabindex="-1">locale <a class="header-anchor" href="#locale-1" aria-label="Permalink to &quot;locale&quot;">​</a></h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-messages" tabindex="-1">locale.messages <a class="header-anchor" href="#locale-messages" aria-label="Permalink to &quot;locale.messages&quot;">​</a></h4><ul><li><strong>类型</strong>：<code>Object</code></li><li><strong>详情</strong>：当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1">locale.setLocale <a class="header-anchor" href="#locale-setlocale" aria-label="Permalink to &quot;locale.setLocale&quot;">​</a></h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：设置当前的语言。</li><li><strong>参数</strong>： <ul><li>locale，语言的名称，应该是符合 <code>&lt;lang&gt;-&lt;COUNTRY&gt;</code> 规范的名称。</li></ul></li><li><strong>返回值</strong>：<code>null</code></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setLocale</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">en-US</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-addlocale" tabindex="-1">locale.addLocale <a class="header-anchor" href="#locale-addlocale" aria-label="Permalink to &quot;locale.addLocale&quot;">​</a></h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：手动添加语言配置。</li><li><strong>参数</strong>： <ul><li>locale，语言的名称，符合 <code>&lt;lang&gt;-&lt;COUNTRY&gt;</code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><strong>返回值</strong>：<code>null</code></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addLocale</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ja-JP</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">messages</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">テスト</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-getalllocales" tabindex="-1">locale.getAllLocales <a class="header-anchor" href="#locale-getalllocales" aria-label="Permalink to &quot;locale.getAllLocales&quot;">​</a></h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</li><li><strong>参数</strong>：null</li><li><strong>返回值</strong>：<code>Array</code></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#BABED8;">(locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAllLocales</span><span style="color:#BABED8;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&quot;en-US&quot;, &quot;id-ID&quot;, &quot;ja-JP&quot;, &quot;pt-BR&quot;, &quot;zh-CN&quot;, &quot;zh-TW&quot;]</span></span></code></pre></div><h3 id="usei18n" tabindex="-1">useI18n <a class="header-anchor" href="#usei18n" aria-label="Permalink to &quot;useI18n&quot;">​</a></h3><p>Composition API, 只能在 <code>setup</code> 函数中使用，更多细节参考 <a href="https://vue-i18n.intlify.dev/api/composition.html#usei18n" target="_blank" rel="noreferrer">Vue I18n</a>。 \b 举个 🌰：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;">{{ t(&#39;language&#39;) }}</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;">message: {{ t(&#39;hello&#39;) }}</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useI18n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useI18n</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// Something to do ...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p><code>useI18n()</code>返回结果是 <a href="https://vue-i18n.intlify.dev/api/composition.html#composer" target="_blank" rel="noreferrer">Composer</a>，提供类似 <code>t</code>、<code>n</code>、<code>d</code> 等转换函数，在模板中使用。</p>`,55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};
Reference in New Issue View Git Blame Copy Permalink