简介

项目中简繁体编译的 Loader，在项目中使用 Loader 后，可以直接将特定文本字符转化，在页面运行时根据设定环境返回简/繁体，无需关心繁体的转化和字库的维护。 语言处理分为两个库：x7-lang-loader 和 x7-lang-vue

安装和配置

下载

loader

npm install x7-lang-loader -D

vue

npm install x7-lang-vue -S

配置

Loader 配置

使用 Loader 配置,以 vue-cli 配置为例，对 vue、js 文件进行编译：

//vue.config.js

module.exports = {
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.(js|vue)$/,
      use: {
        loader: 'x7-lang-loader',
        //options: {
          // loader配置
          // functionName: '$7lang',
       // },
      },
    })
  },
}

Vue 入口函数配置

在 Vue 项目中，注册、配置你的入口函数

import Vue from 'vue'
import X7Lang from 'x7-lang-vue'

//初始化x7lang
const x7lang = new X7Lang({
  langType: 1, //0简体，1繁体
  willChangeLang: true, //如果不设置true，后续将不能更改简繁体。不需要更改简繁体时，不建议使用true
  //functionName:'$7lang' //函数名称
})

Vue.use(x7Lang)

//初始化Vue
new Vue({
  x7lang,
  render: h => h(App),
}).$mount('#app')

使用

到此，你可以在项目中使用注册函数配合简体来编写代码了。

在模版中使用

{{ $7lang('简繁体字符串') }}

Vue 组件实例 使用

this.$7lang('简繁体字符串')

最终，在页面上显示 ”簡繁體字符串“。

其他

当然，你可以增加一些简单的表达式，比如

const name='小7手游'
this.$7lang('简体'+'繁体'+name)
//注意：name变量的内容并不会被转化

修改简繁体

你可以在使用中更改语言，切换简繁体，前提是构造时将 willChangeLang 参数 设置为 true。

//切换成繁体
x7lang.changeLang(1)
//切换成简体
x7lang.changeLang(0)

配置

Loader

| 名称 | 描述 | 默认值 | | ------------ | -------------------------------- | ------ | | functionName | 注册的函数名称，需要与注册时统一 | $7lang |

constructor options

| 名称 | 描述 | 默认值 | | -------------- | -------------------------------------------------------- | ------ | | langType | 语言。0：简体；1：繁体 | 0 | | willChangeLang | 是否在后续改变语言。如果没有改变语言需要，请设置为 false | false | | functionName | 注册的函数名称，需要和 Loader 统一 | $7lang |

methods

| 名称 | 描述 | 参数 | | ---------- | ---------- | ---------------- | | changeLang | 更改简繁体 | 0：简体，1：繁体 |