duli-i18n v1.0.8

duli-i18n相关介绍

功能：可实现语言切换，配置切换，无感刷新页面

API

方法

属性

安装

npm i duli-i18n

vue3 + ts中使用

main.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文件中使用

<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

export {}

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

ts打包：tsc --build