需求小能手——简繁切换

前言

最近一个项目有简繁字体切换的功能,经过与大佬的探讨,最终大佬完成了这个需求,本节我就借花献佛,汇总一下该功能的实现方案。

思路

项目要求页面上展示的字体类型是一致的,包括接口返回数据、消息提示类等。最开始这功能是全权交由前端处理,后端返回的数据前端也要一块处理。简单搜索讨论下,确定了几个思路,接下来就是一个个去尝试。

Vue I18n

公司技术栈是vue2,简繁切换就是语种切换,所以一开始就想到了Vue I18n国际化插件,中英切换一般就是通过该插件实现的。在此之前我们先简单了解下Vue I18n实现语音环境的方法,以中英为例:

  1. 安装Vue I18n,注意我们要根据vue版本去下载,项目中用的vue2,下载了V8.x版本,如果是vue3,就下载V9.x版本。
  2. 设置本地化语言环境信息------messages,ts类型为LocaleMessages,key值是语言Locale,value值是信息对象。

声明一个中英的hello信息:

js 复制代码
const messages = {
en: {
message: {
hello: 'hello'
}
},
zh: {
message: {
hello: '你好'
}
}
}

3.new一个实例,设置语言与语音环境信息两个配置项,并添加到Vue实例中。

js 复制代码
const i18n = new VueI18n({
  locale: 'zh', //语言
  messages,
})
new Vue({ i18n }).$mount('#app')

修改locale配置项的值,页面就会渲染对应语音的值。这就是Vue I18n配置语音环境的过程,套用到我们的简繁切换中,就是在第二步设置messages时将英文改为繁体。直接使用Vue I18n需要我们设置大量的messages,在此基础上我们可以定义一个简繁切换的方法,这个方法网上有很多,大致思路如下:

  • String原型上新增一个tran方法,循环字符串将每个字符进行替换,zhS为简体、zhT为繁体。
  • 在页面渲染的时候调用方法去循环页面元素,获取元素里面text,然后调用tran方法,完成繁体切换。 使用Vue I18n有一大弊端,每个页面在加载时都需要去调用该方法,每次请求接口也要去调用,性能会大大的折扣。

字体包

第二种方案是通过css,引入字体包,将font-family设置为繁体,这样不仅方便快捷,性能也比Vue I18n好多了。注意我们一定要找免费商用的字体包,繁体比较出名的字体包就是苹方。下载好之后,用@font-face引入使用:

js 复制代码
@font-face {
font-family: 'PingFang SC';
src: url(字体包路径);
}

我们再定义一个class类,将font-family设置为PingFang SC,当我们需要繁体时,就往body添加该类名,反之去掉即可。

js 复制代码
  changeLocale(flag) {
    if(flag) {
      document.body.setAttribute('class', 'zhT')
    } else {
      document.body.removeAttribute('class')
    }
  }

这样简繁切换就能搞好了,不过css终归是样式操作,该方法弊端就是dom里面的内容还是简体,不会跟着变动,请求接口传参也都是简体。

总结

以上就是简繁切换实现两种方式,实际项目中我们可以结合两种使用,接口处理类用tran方法;页面用字体包。如果页面要求dom里的内容也要跟着变化,字体包就不需要考虑了。

相关推荐
布列瑟农的星空7 分钟前
从webpack到vite——配置与特性全面对比
前端
程序员鱼皮10 分钟前
我代表编程导航,向大家道歉!
前端·后端·程序员
车前端13 分钟前
极致灵活:如何用一个输入框,满足后台千变万化的需求
前端
用户114818678948414 分钟前
Rollup构建JavaScript核验库,并发布到NPM
前端
肥晨17 分钟前
前端私有化变量还只会加前缀嘛?保姆级教程教你4种私有化变量方法
前端·javascript
小高00717 分钟前
前端 Class 不是花架子!3 个大厂常用场景,告诉你它有多实用
前端·javascript·面试
不喝奶茶哦喝奶茶长胖22 分钟前
CSS 文本换行控制:text-wrap、white-space 和 word-break 详解
前端
傅里叶44 分钟前
Flutter用户体验之01-避免在 build() 或 initState() 内直接做耗时 blocking
前端·flutter
namehu1 小时前
搞定 iOS App 测试包分发,也就这么简单!😎
前端·ios·app
code_YuJun1 小时前
1. 使用VueCli编译生产环境代码以及创建不同模式
前端