vue3中的elementPlus全局组件中文转换方式

目录
  • elementPlus 全局组件中文转换
  • elementPlus 设置默认语言为中文

elementPlus 全局组件中文转换

在项目中使用日期下拉框发现是英文的，需要全局改成中文样式。

代码实现

在 App.vue 的文件中修改即可。

代码如下

<template>
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>
</template>
<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

const { locale } = reactive({
  locale: zhCn,
});

</script>

参考官方链接：https://element-plus.org/en-US/guide/i18n.html#configprovider

elementPlus 设置默认语言为中文

Element UI的默认语言是英文。那么如何才能将其改成中文呢？

ElementUI 提供了国际化的支持，这里给出其中的一个改成中文的方法。

找到main.js 文件, 做如下改动：

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import locale from "element-plus/lib/locale/lang/zh-cn";//需要新加的代码
import App from './App.vue'
import "element-plus/lib/theme-chalk/index.css";

let app = createApp(App);
app.use(ElementPlus, {locale});//需要改变的地方，加入locale
app.mount('#app');

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3.x中使用element-plus的各种方式详解

    Vue3.x中使用element-plus的各种方式详解

    目录 安装element-plus 方式一.全局引入element-plus 方式二.单个组件中使用 方式三.经过自己封装按需引入 1.在项目的src目录下建一个文件夹 global 2.register-element.ts代码如下 3.index.ts代码如下 4.main.ts中引入 安装element-plus element-plus // NPM  npm install element-plus --save // Yarn  yarn add element-plus // pn

  • vue-element-admin如何转换成中文

    vue-element-admin如何转换成中文

    目录 vue-element-admin转换成中文 vue-element-admin中文问题 vue-element-admin转换成中文 从admin官网上git下来的默认是英文,是修改不了语言的. 如果需要转换成中文,在vscode终端里git checkout i18n,然后npm install,npm run dev之后就是中文的了 如图: vue-element-admin中文问题 今天刚看到vue-element-admin项目,下载下来后发现是英文的 要切换成中文,需要下载它的

  • vue3集成Element-plus实现按需自动引入组件的方法总结

    vue3集成Element-plus实现按需自动引入组件的方法总结

    目录 1.第一种方式,使用全局引入 2.第二种方式,使用局部引入 3.按需自动引入element-plus  推荐 总结 element-plus正是element-ui针对于vue3开发的一个UI组件库, 它的使用方式和很多其他的组件库是一样的,其他类似于ant-design-vue.NaiveUI.VantUI都是差不多的:安装element-plus 首先下载element-plus npm install element-plus 1.第一种方式,使用全局引入 引入element-plu

  • 详解vue element plus多语言切换

    详解vue element plus多语言切换

    目录 前言 如何实现多语言切换 ? 1.安装包vue-i18n 2.在src目录下新建如图: 3. 在main.js中 4.在vue文件中使用 如何动态切换语言并更改elementUI语言 ? 1.利用vuex,在mutations中写一个方法更改element语言 2.使用 更改完elementUI组件视图不更新? 1. 在router-view上控制视图显示/隐藏 2. 在切换语言时调用reload 3.需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

  • vue3中的elementPlus全局组件中文转换方式

    目录 elementPlus 全局组件中文转换 elementPlus 设置默认语言为中文 elementPlus 全局组件中文转换 在项目中使用日期下拉框发现是英文的,需要全局改成中文样式. 代码实现 在 App.vue 的文件中修改即可. 代码如下 <template>     <el-config-provider :locale="locale">       <router-view></router-view>     <

  • VUE3学习教程之全局组件和局部组件

    VUE3学习教程之全局组件和局部组件

    目录 1. 概述 2. 全局组件 2.1 不使用组件的写法 2.2 使用组件 2.3 组件中包含变量 2.4 组件的复用 2.5 组件中使用组件 2.6 总结 3. 局部组件 3.1 局部组件的使用 3.2 总结 附:vue 3 组件的分类 全局组件与局部组件 总结 1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> <div id="myDiv&quo

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • 如何在在Vue3中使用markdown 编辑器组件

    目录 安装 引入组件 基础用法 保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s

  • vue3中echarts的tooltip组件不显示问题及解决

    vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • vue3中keep-alive和vue-router的结合使用方式

    vue3中keep-alive和vue-router的结合使用方式

    目录 前言 代码 一.为何要使用keep-alive? 二.vue2中使用keep-alive 三.vue3中使用keep-alive 四.keep-alive属性“include,exclude”的使用 前言 keep-alive:Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. router-view:vue-router内置组件, 如果直接包含在keep-alive里面,所有路径匹配到的组件都会被缓存. 提示:以下是本篇文章正文内容,下面案例可供参考 代码 Hmoe组件:

  • vue3中获取ref元素的几种方式总结

    目录 vue3获取ref元素方式 vue3中ref获取dom(包含for循环) 情况一:只是单纯的获取某个dom元素 情况二:在for循环中获取dom元素 情况三:获取ref中的ref vue3获取ref元素方式 1. 原生js获取dom元素: document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) 2. ref获取单个dom元素: <template

  • 详解vue3中的非父子组件传值

    详解vue3中的非父子组件传值

    目录 App.vue sub1.vue sub2.vue 总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为. vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信: 假设有三个组件:App.vue(父级).sub1(子级).sub2(子级的子级): App.vue <template> <div style="border: 1px solid pink&q

  • vue3中的伸缩菜单组件

    目录 vue3伸缩菜单组件 效果图 总结 vue3伸缩菜单组件 最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可! 效果图 1.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建index.vue文件 这个文件里写入 <template> <div class="common-layout"> <el-conta

  • C#中字符串与字节数组的转换方式

    一.编码(转成字节数组)GetBytes 1.ASII码:字符串中的每个字符用一个字节表示. 每个字符实际上只使用了7位,从00h-7Fh.只能表达128个字符.不能代表汉字, byte[] b = Encoding.ASCII.GetBytes("yourstring"); Console.Write(string.Join("-", b.Select(p => p.ToString()))); //  得到:121-111-117-114-115-116-

随机推荐