当前位置: 首页 > article >正文

element plus 语言切换组件使用

背景:现在的很多网站要求支持多种语言切换需求,element plus 正好有这种组件可以满足这种需求。

使用element plus的效果

1、介绍组件的引用

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

2、在全局中引用

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

import { ElConfigProvider } from 'element-plus'

  <el-config-provider :locale="locale">

    <div id="app">

      <router-view></router-view>

    </div>

  </el-config-provider> 

const locale = computed(() => {

  const langState = store.getters['settingsModule/getLangState']

  const local = langState === '/zh-CN' ? zhLocale : enLocale

  return local

})

3、要注意的地方是namespace参数,因为默认情况下只会对前缀是el的进行国际化转换。(因此这种方式只是局部的国际化)

 


http://www.kler.cn/a/5688.html

相关文章:

  • python——面向对象(下)
  • C 中的循环
  • Jenkins使用
  • 【计算机视觉 | 目标检测】DETR风格的目标检测框架解读
  • QT之QCamera
  • Java多态
  • 阶乘约数——蓝桥杯python组国赛题(C++、唯一分解定理)
  • 利用 Docker 搭建主从服务器
  • Spring MVC 之 ViewResolver
  • 索马里ECTN/BESC/CTN证书
  • 【新2023Q2押题JAVA】华为OD机试 - 服务依赖
  • 启动优化小结
  • UDSonLIN(ISO14229-7)诊断协议
  • tsconfig.json参数详解
  • 【Redis】高可用:Redis的主从复制是怎么实现的?
  • C语言中void的高级应用
  • spring boot 集成 postgresql mybatis-plus swagger pagehelper
  • Hystrix学习笔记
  • Android Webview隐藏部分div
  • 【从零开始学习 UVM】7.3、Driver Sequencer Handshake —— get() 和 put() 方法详解【了解即可】