vue 本地vue.js_简单的本地化插件，用于惊人的Vue.js

vue 本地vue.js

垂直定位 (V-Localize)

V-Localize is a very simple localization plugin for Vue.js. Your localizations will be available anywhere in your web application wrapped in a Vue instance.

V-Localize是Vue.js的非常简单的本地化插件。 在Vue实例中包装的Web应用程序中的任何位置都可以使用您的本地化版本。

View demo 查看演示 Download Source 下载源

支持 (Support)

Chome	Edge	Firefox	Opera	Safari
4.0+ ✔	✔	3.5+ ✔	10.50+ ✔	4.0+ ✔

丁丁	边缘	火狐浏览器	歌剧	苹果浏览器
4.0+✔	✔	3.5+✔	10.50+✔	4.0+✔

V-Localize was developed using Vue.js 2.x, support for previous versions is not available.

V-Localize是使用Vue.js 2.x开发的，不支持以前的版本。

用法 (Usage)

To install via Bower, simply do the following:

要通过Bower安装，只需执行以下操作：

bower install v-localize

To install via NPM:

通过NPM安装：

npm install v-localize

For a quick start using jsdelivr:

为了快速开始使用jsdelivr：

<script src="https://cdn.jsdelivr.net/npm/v-localize/dist/v-localize.js"></script>

Installing the plugin is then as simple as:

安装插件非常简单：

import Localize from 'v-localize';

Vue.use(Localize);

let localize = Localize.config({
  default: 'en-US',
  available: ['en-US', 'es-SP', {
    locale: 'ar-MS',
    orientation: 'rtl',
    font: {
      size: 'smaller'
    }
  }],
  fallback: '?',
  localizations: {
    "en-US": {
      header: {
        title: 'English'
      }
    },
    "es-SP": {
      header: {
        title: 'Spanish'
      }
    },
    "ar-MS": {
      header: {
        title: 'Arabic'
      }
    }
  }
});

new Vue({
  el: '#app',
  localize
});

Once your Vue app has been instantiated, the language can be changed by calling $locale(args*) from your Vue instance or virtual node.

实例化Vue应用程序后，可以通过从Vue实例或虚拟节点调用$locale(args*)来更改$locale(args*) 。

<button @click="$locale({l: 'en-US'})">English</button>
<button @click="$locale({l: 'es-SP'})">Spanish</button>

You can specify your localizations like so:

您可以像这样指定本地化：

<!-- add a localized title to this element targeting en-US -->
<h1 v-localize="{i: 'header.title', t: 'en-US', attr: 'title'}">Hello World</h1>
<!-- replace this element's text with localized item -->
<h2 v-localize="{i: 'header.title'}"></h2>

Alternatively, you can get your current localization by calling $locale() without specifying a language.

另外，您可以通过调用$locale()而不指定语言来获取当前的本地化信息。

<!-- fetch current locale -->
<h1>Locale: {{ $locale() }}</h1>

For fetching a specific locale item programatically within a component method:

为了在组件方法中以编程方式获取特定的语言环境项目：

export default {
  name: 'some-component',
  methods: {
    getTitle() {
      window.alert(this.$locale({i: 'title'}))
    },
    getSpanishTitle() {
      window.alert(this.$locale({i: 'title', t: 'sp-ES'}))
    }
  }
}

组态 (Configuration)

The plugin takes 5 options,

该插件有5个选项，

debug: If enabled, will spit warnings and errors to console.

debug ：如果启用，将向控制台吐出警告和错误。

default: Default language key to target if not set already.

default ：如果尚未设置，则以默认语言键为目标。

available: List of available localizations, can optionally specify locale options. ex;

available ：可用的本地化列表，可以选择指定语言环境选项。 前

['en-US', 'es-SP', 'pr-BR', {
  locale: 'ar-MS',
  orientation: 'rtl'
}]

fallback: Default text to show if localization for current language not found. If not specified, will default to 'N/A'.

fallback ：默认文本，显示是否未找到当前语言的本地化版本。 如果未指定，则默认为'N/A' 。

webStore: If the Vue instance is accessed within a web context and option webStore is enabled, plugin will store the locale in local storage for the next visit.

webStore ：如果在Web上下文中访问Vue实例并且启用了webStore选项，则插件会将语言环境存储在本地存储中以供下次访问。

localizations: JSON object for localizations.

localizations ： localizations JSON对象。

{
 "en-US": { // language branch
   "header": "Hello World!", // localization
   "nav": {
     "home": "Home" // nested localization
   }
 }
}

区域设置选项 (Locale Options)

Locale configuration currently supports the following options,

语言环境配置当前支持以下选项，

orientation: Text direction of target element, useful for orientation of script languages.

orientation ：目标元素的文字方向，对脚本语言的方向是有用的。

font.family: Font family to change to. Re: https://www.w3schools.com/jsref/prop_style_fontfamily.asp

font.family ：要更改的字体系列。 回复： https ： //www.w3schools.com/jsref/prop_style_fontfamily.asp

font.size: Font size to scale to. Re: https://www.w3schools.com/jsref/prop_style_fontsize.asp

font.size ：要缩放的字体大小。 回复： https ： //www.w3schools.com/jsref/prop_style_fontsize.asp

翻译自: https://vuejsexamples.com/simple-localization-plugin-for-the-amazing-vue-js/

vue 本地vue.js