首页 > 其他分享 >【vue3】element-plus组件国际化随时切换语言

【vue3】element-plus组件国际化随时切换语言

时间:2022-09-19 22:12:03浏览次数:60  
标签:computed locale element plus vue3 组件

背景

我们可以通过ui组件库来统一调整组件的语言设置,比如统一设置成中文或者英文

步骤

  1. 引入 element-plus相关的语言包。这里使用中文
  2. 通过 el-config-provider组件进行配置
 // App.vue
<template>
  <div class="app">
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default defineComponent({
  components: {},
  setup() {
    const locale = computed(() => zhCn)
    return {
      locale
    }
  }
})
</script>

<style scoped>
.app {
  height: 100%;
}
</style>


标签:computed,locale,element,plus,vue3,组件
From: https://www.cnblogs.com/it774274680/p/16709269.html

相关文章

  • vue3组件的几种引入、注册、自动注册等
    全局组件的注册和引入全局组件注册components/index.js【方式一:先引入后注册】importBgImagefrom"@/components/global/web-background/bg-image.vue";importBa......
  • vue3中vuex使用实例
    通过脚手架创建项目会自动创建store/index.js1.vuex基本结构import{createStore}from'vuex'exportdefaultcreateStore({//全局的状态初始值state:{},......
  • Vue3中使用ref获取元素节点
    本文介绍在vue3的setup中使用compositionAPI获取元素节点的几种方法:静态绑定仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声......
  • Element UI 防止多次提交数据
    场景:Table列表中【执行】操作,点击【执行】显示弹框,提交时,多次点击【确定】按钮,可以多次提交数据;需求:点击【确定】时,不能再次重复点击,直到API返回。实现方式:在提交数......
  • mybatis-plus修改时将字段(比如备注)的内容清空(取消字段的空值过滤)
     4110次阅读 it • bug及解决方案 2019-12-09这次遇到的是修改问题,我想将备注改为空,或者说把以前的备注删掉。可是mybatisplus已经做了空值过滤,也就是如果你不......
  • mybatis-plus分页失效原因
    mybatis-plus分页失效原因一、在启动类添加如下配置@SpringBootApplication@MapperScan("com.**.mapper")publicclassDemoApplication{publicstaticvoidma......
  • ElementUI Table 表格树形结构多选框选中父级时会选中子级(递归多级)
    <template> <el-table:data="renderDynamic"ref="product"borderrow-key="id":row-class-name="rowClassNameFun" :header-row-class-name="headerRowClassName"......
  • 使用Vite快速构建Vue3+ts+pinia脚手架
    一、前言vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波。vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个......
  • 基于electron+vue+element构建项目模板之【改造项目篇】
    1、概述开发平台OS:windows开发平台IDE:vscode上一篇中已完成了electron-vue项目的创建,本篇章中则介绍在此项目基础上进行取消devtools的安装、项目结构的改造、环境变量......
  • vue3 基础-具名插槽 & 作用域插槽
    上篇对slot的基本概念和使用有一个初步的认识,即通过slot的这种设计,父组件可以在调用子组件的时候,给组件之间传递一波dom,子组件通过slot标签来进行接收.sl......