x7-lang-loader

简介

项目中简繁体编译的 Loader，在项目中使用 Loader 后，可以直接将特定文本字符转化，在页面运行时根据设定环境返回简/繁体，无需关心繁体的转化和字库的维护

安装和配置

下载

npm install x7-lang-loader

配置

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/loader',
        options: {
          // loader配置
          // functionName: '$7lang',
        },
      },
    })
  },
}

入口函数配置

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

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

//初始化x7lang
const x7lang = new X7Lang({
  langType: 1, //0简体，1繁体
  willChangeLang: true, //如果不设置true，后续将不能更改简繁体
})

Vue.use(x7Lang, {
  //配置..
  //functionName:'$7lang' //函数名称
})

//初始化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	注册的函数名称，需要和 use 注册时统一	$7lang

constructor options

名称	描述	默认值
langType	语言。0：简体；1：繁体	0
willChangeLang	是否在后续改变语言。如果没有改变语言需要，请设置为 false	false

methods

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

Vue Use

名称	描述	默认值
functionName	注册的函数名称，需要和 Loader 统一	$7lang