# i18n

> Your time is limited, so don’t waste it living someone else’s life.
>
> *—— **Steve Jobs***

多語言設定就好像是這句名言，如果沒有翻譯成多種語言，那麼就僅僅是在一個文化圈流傳，這樣有點太可惜了。

<figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2Fme5Fot70hKQ3jY4AES5B%2Fimage.png?alt=media&#x26;token=36dc6141-4db2-446d-8b3a-d7302e5f7244" alt="" width="188"><figcaption><p>一個寫著不同語言的我愛你的版子。</p></figcaption></figure>

### Vue2

```javascript
//main.js
import Vue from 'vue'

import piman from "@yasai/piman";
import '@yasai/piman/dist/piman.css';
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })
```

### Nuxt2

```javascript
// nuxt.config.js
export default {
  plugins: [
    '@/plugins/piman.js',
  ],
}

// plugins/bp-a11y.js
import Vue from 'vue'
import piman from "@yasai/piman";
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })

```

### 設定 <a href="#setting" id="setting"></a>

```javascript
import piman from "@yasai/piman"

piman.i18n.use({
  "pagination":{
    "page":"ページ"
  },
})
```

### Bpai18n

```javascript
import BpaI18n from '../locale'

export default Vue.extend({
  mixins: [ BpaI18n ],
  //...
})
```

### 文字 <a href="#text" id="text"></a>

```html
<!-- text -->
<span>{{ t('pagination.per') }}</span>
```

### v-bind

```html
<!-- v-bind -->
<nav
  :aria-label="t('pagination.aria')"
  class="bpa-pagination"
/>
```

### Methods

```javascript
//template
{{ add() }}

//script
methods: {
  add(){
    let text = this.t('pagination.aria')
    text = text + 'Add'
    return text
  },
}
```

### 使用 <a href="#using" id="using"></a>

```javascript
import piman from "@yasai/piman"

piman.i18n.use('en')
```

### 新增語言 <a href="#add" id="add"></a>

1. 新增語言檔至 /lang 資料夾
2. 在 /lang/index.ts 寫 export

### 限制 <a href="#restrict" id="restrict"></a>

若有使用其他第三方套件，則需手動為其改變語言。

### Options

```javascript
// All options
{
  "pagination":{
    "total":"共",
    "page":"頁",
    "per":"每頁",
    "result":"項",
    "goto":"前往",
    "exceed":"噢！此頁碼不適用。",
    "aria":"分頁選擇",
    "input_goto":"請輸入想前往的頁面",
    "first_page_text":"第一頁",
    "prev_page_text":"上一頁",
    "next_page_text":"下一頁",
    "last_page_text":"最後一頁",
  },
  "form":{
    "required": "必填"
  },
  "breadcrumb":{
    "current_page":"現在頁面位置"
  },
  "button":{
    "loading": "載入中"
  },
  "dialog":{
    "close":"關閉燈箱"
  },
  "dropdown":{
    "goto":"前往",
    "new_tab":"另開視窗前往"
  },
  "input":{
    "show":"點擊顯示密碼",
    "hide":"點擊隱藏密碼",
    "clear":"清空輸入",
    "placeholder":"請輸入"
  },
  "msg":{
    "area":"訊息區域",
    "close":"關閉訊息框",
  },
  "select":{
    "placeholder": "請選擇",
    "clear":"清空下拉式選單",
    "search":"搜尋",
    "area_search":"請輸入關鍵字搜尋與過濾下拉式選單選項"
  },
  "collapse":{
    "title": "標題",
  },
  "switch":{
    "off": "關閉",
    "on": "開啟"
  }
}
```