# duli-i18n

**Repository Path**: dulily/duli-i18n

## Basic Information

- **Project Name**: duli-i18n
- **Description**: 可实现语言切换，配置切换，无感刷新页面
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-08
- **Last Updated**: 2022-10-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# duli-i18n相关介绍
**功能：可实现语言切换，配置切换，无感刷新页面**

## API
**方法**

| 方法           | 说明               | 参数                                     |
| -------------- | ------------------ | ---------------------------------------- |
| createI18n     | 创建i18n国际化     | options(locale: string, message: object) |
| changeLocale   | 切换当前使用的语言 | locale: string                           |
| changeMessages | 切换语言的配置信息 | message: string                          |

**属性**

| 属性    | 说明                 |
| ------- | -------------------- |
| locale  | 当前的语言值，如'zh' |
| message | 当前使用的语言配置   |

## 安装
```sh
npm i duli-i18n
```
## vue3 + ts中使用
**main.ts**
```ts
import { createApp } from 'vue'
import App from '@/app.vue'
import { createI18n } from 'duli-i18n'
const app = createApp(App)

// 自定义配置语言（待修改）
const language = {
  zh: {
    greetings: {
      hello: '哈喽，你好吗？'
    }
  },
  en: {
    greetings: {
      hello: 'hello, how are you?'
    }
  }
}
const i18n = createI18n({
  locale: 'zh',
  messages: language
})

app
  .use(i18n)
  .mount('#app')
```

**vue文件中使用**

```vue
<template>
  <div>
    <p>{{ $translate('greetings.hello') }}</p>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { changeLocale, locale } from 'duli-i18n'
const change = () => {
  changeLocale(locale.value === 'zh' ? 'en' : 'zh')
}
</script>

<style scoped>

</style>
```

为了避免`$translate`标红，可以在ts中声明全局配置`typings/global-properties.ts`

```ts
export {}

declare module 'vue' {
  interface ComponentCustomProperties {
    $translate: (key: string) => string
  }
}

```

ts打包：tsc --build