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');
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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转换成中文 从admin官网上git下来的默认是英文,是修改不了语言的. 如果需要转换成中文,在vscode终端里git checkout i18n,然后npm install,npm run dev之后就是中文的了 如图: vue-element-admin中文问题 今天刚看到vue-element-admin项目,下载下来后发现是英文的 要切换成中文,需要下载它的
-
详解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集成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
-
vue3中的elementPlus全局组件中文转换方式
目录 elementPlus 全局组件中文转换 elementPlus 设置默认语言为中文 elementPlus 全局组件中文转换 在项目中使用日期下拉框发现是英文的,需要全局改成中文样式. 代码实现 在 App.vue 的文件中修改即可. 代码如下 <template> <el-config-provider :locale="locale"> <router-view></router-view> <
-
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组件不显示 解决办法 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的结合使用方式
目录 前言 代码 一.为何要使用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中的非父子组件传值
目录 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-
随机推荐
- JSP 连接MySQL配置与使用
- 使用Java实现DNS域名解析的简单示例
- 简单介绍Python中的filter和lambda函数的使用
- 原生javascript上传图片带进度条【实例分享】
- JavaScript中使用arguments获得函数传参个数实例
- php实例分享之二维数组排序
- ssm框架下web项目,web.xml配置文件的作用(详解)
- android中使用SharedPreferences进行数据存储的操作方法
- js中精确计算加法和减法示例
- Python json 错误xx is not JSON serializable解决办法
- 七个不允许错过的jQuery小技巧
- 浅谈JavaScript对象的创建方式
- 仿微博字符限制效果实现代码
- CentOS 7.2安装Zabbix 3.2教程详解
- c# 配置文件App.config操作类库的方法
- Android package属性、package name和Application ID三者的联系及区别
- php 写入缓存文件、读取缓存文件的函数代码
- iOS开发中class和#import的区别介绍
- 详解Golang中下划线的使用方法
- jquery实现二级导航下拉菜单效果实例