vue3+vite +element plus日历date picker中文显示

项目情况

element-plus 默认是英文模式,需要中文模式的话需要设置一下:

项目框架(vue3):vite +JS + element-plus

版本:(注意版本兼容,element plus 较低版本:1.xx.xx,不一定适合此法

"element-plus": "^2.4.4",
"vue": "^3.0.4"

element Plus是按需导入,需要使用el-config-provider.

nullA Vue 3 based component library for designers and developersicon-default.png?t=N7T8https://element-plus.gitee.io/zh-CN/guide/i18n.html

在App.vue中使用el-config-provider改变语言效果

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from "../src/core/element";import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'const  app=createApp(App)app.use(ElementPlus)const vm= app.mount('#app')
console.log(app)
console.log(vm)

 vite. config.js

pnpm run dev会警告按需引用,如要在main.js使用zh-cn.mjs,需要在项目根目录vite. config.js(如没有就创建一个),加下include路径加入。

module.exports = {lintOnSave: false,//关闭语法检查optimizeDeps: {include: ['element-plus/dist/locale/zh-cn.mjs'],}
}

APP.vue 

<template><el-config-provider :locale="locale"><img alt="Vue logo" src="./assets/logo.png"/><el-divider></el-divider><div class="block"><span class="demonstration">中文日历:</span><el-date-pickerv-model="value1"type="date"placeholder="Pick a day"/></div><el-divider></el-divider> <br/></el-config-provider></template><script> 
import locale from 'element-plus/dist/locale/zh-cn.mjs'
import {ElConfigProvider} from 'element-plus'export default {name: 'App',components: {ElConfigProvider,},setup() {},data() {return {locale: locale,value1: '',name: '张三',job: {type: 'engine', salary: 12000,address: {query: {name: 'gz'}}},hobby: ['排球', '羽毛球', '爬山']}},methods: {}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/605786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STL标准库与泛型编程(侯捷)笔记3

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…

中国式浪漫:古人对万物的雅称

古人对万物的称呼都是美而浪漫&#xff0c;在诗词中&#xff0c;女子被称为红妆、佳人、婵娟、碧玉、红颜。雪也叫作琼芳、玉絮、六花、玉鸾&#xff1b;在诗词中&#xff0c;每一缕风&#xff0c;每一片雪&#xff0c;都有一个雅致的名字。所谓的诗情画意&#xff0c;便是用普…

基于深度学习的停车位关键点检测系统(代码+原理)

摘要&#xff1a; DMPR-PS是一种基于深度学习的停车位检测系统&#xff0c;旨在实时监测和识别停车场中的停车位。该系统利用图像处理和分析技术&#xff0c;通过摄像头获取停车场的实时图像&#xff0c;并自动检测停车位的位置和状态。本文详细介绍了DMPR-PS系统的算法原理、…

最短路径问题相关算法、原理及适用场景

这里写目录标题 一、最短路径算法、原理及适用场景深度优先搜索算法/广度优先搜索算法Floyd算法&#xff08;Floyd-Warshell算法&#xff09;Dijkstra算法A*算法贝尔曼福特算法&#xff08;Bellman-Ford Algorithm&#xff09;SPFA算法&#xff08;Shortest Path Faster Algori…

FPGA高端项目:纯verilog的 25G-UDP 高速协议栈,提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的以太网方案本协议栈的 1G-UDP版本本协议栈的 10G-UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设计架构框图网络调试助手…

传感数据分析——小波滤波

传感数据分析——小波滤波 文章目录 传感数据分析——小波滤波前言一、运行环境二、Python实现总结 前言 小波滤波算法是一种基于小波变换的滤波方法&#xff0c;其核心思想是将信号分解成不同的频率成分&#xff0c;然后对每个频率成分进行独立的处理。小波滤波器的设计和应用…

第12课 实现桌面与摄像头叠加

在上一节&#xff0c;我们实现了桌面捕获功能&#xff0c;并成功把桌面图像和麦克风声音发送给对方。在实际应用中&#xff0c;有时候会需要把桌面与摄像头图像叠加在一起发送&#xff0c;这节课我们就来看下如何实现这一功能。 1.备份与修改 备份demo11并修改demo11为demo12…

安达发|基于APS排程系统的PDM功能

APS系统&#xff08;Advanced Planning and Scheduling&#xff0c;先进计划与排程&#xff09;是一种基于APS系统&#xff08;Advanced Planning and Scheduling&#xff0c;先进计划与排程&#xff09;是一种基于供应链管理和生产管理的综合性软件系统。它通过整合企业内外部…

在anaconda中安装pytorch的GPU版本

本文前提&#xff1a; 1.你已经下载好了anaconda,最好是新建一个虚拟环境来安装pytorch的GPU版本&#xff0c;并且设置了国内镜像源&#xff1b; 2.了解自己电脑对应的cuda版本&#xff0c;可通过nvidia-smi&#xff0c;并下载好了cuda。 安装pytorch的GPU版本 到官网中https…

微信公众号-订阅通知

第一步&#xff1a; 公众号需要实名认证&#xff0c;完成以后&#xff01; 设置-开发里找到基本配置&#xff1a; 开发者ID(AppID):xxxxxxxxxxxxxxxxxxxxxxxxx 开发者密码(AppSecret):xxxxxxxxxxxxxxxxxxxxxxxxx 白名单IP也要填写上你的服务器IP哦&#xff01; 第二步&am…

聊天Demo

文章目录 参考链接使用前端界面消息窗口平滑滚动至底部vue使用watch监听vuex中的变量变化 参考链接 vue.js实现带表情评论功能前后端实现&#xff08;仿B站评论&#xff09; vue.js实现带表情评论仿bilibili&#xff08;滚动加载效果&#xff09; vue.js支持表情输入 vue.js表…

使用Scrapy框架和代理IP进行大规模数据爬取

目录 一、前言 二、Scrapy框架简介 三、代理IP介绍 四、使用Scrapy框架进行数据爬取 1. 创建Scrapy项目 2. 创建爬虫 3. 编写爬虫代码 4. 运行爬虫 五、使用代理IP进行数据爬取 1. 安装依赖库 2. 配置代理IP和User-Agent 3. 修改爬虫代码 4. 运行爬虫 六、总结 一…

【AI视野·今日Sound 声学论文速览 第四十二期】Fri, 5 Jan 2024

AI视野今日CS.Sound 声学论文速览 Fri, 5 Jan 2024 Totally 10 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers PosCUDA: Position based Convolution for Unlearnable Audio Datasets Authors Vignesh Gokul, Shlomo Dubnov深度学习模型需要大量干净的…

【算法Hot100系列】合并两个有序链表

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

前端nginx配置指南

前端项目发布后&#xff0c;有些接口需要在服务器配置反向代理&#xff0c;资源配置gzip压缩&#xff0c;配置跨域允许访问等 配置文件模块概览 配置示例 反向代理 反向代理是Nginx的核心功能之一&#xff0c;是指客户端发送请求到代理服务器&#xff0c;代理服务器再将请求…

数据结构-怀化学院期末题(321)

图的广度优先搜索 题目描述&#xff1a; 图的广度优先搜索类似于树的按层次遍历&#xff0c;即从某个结点开始&#xff0c;先访问该结点&#xff0c;然后访问该结点的所有邻接点&#xff0c;再依次访问各邻接点的邻接点。如此进行下去&#xff0c;直到所有的结点都访问为止。在…

OpenHarmony沙箱文件

一.前言 1.前景提要 DevEcoStudio版本&#xff1a;DevEco Studio 3.1 Release SDK版本&#xff1a;3.2.2.5 API版本&#xff1a;9 2.概念 在openharmony文件管理模块中&#xff0c;按文件所有者分类分为应用文件和用户文件和系统文件。 1&#xff09;沙箱文件。也叫做应…

Jmeter扩展函数?年薪50W+的测试大佬教你怎么玩

很多同学&#xff0c;都问我&#xff1a;“老师&#xff0c;我的 jmeter 里面&#xff0c;怎么没有 MD5 函数&#xff0c;base64 函数也没有&#xff0c;我是不是用了假的 jmeter&#xff1f;” 哈哈哈&#xff0c;不是的。jmeter 的函数&#xff0c;有自带函数和扩展函数两大…

等价类划分法

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;软件测试面试题分享&#xff1a; 1000道软件测试面试题及答案&#x1f4e2;软件测试实战项目分享&#xff1a; 纯接口项目-完…

<HarmonyOS第一课>1~10课后习题汇总

HarmonyOS第一课 &#xff1c;HarmonyOS主题课&#xff1e;1~3课后习题汇总 1运行Hello World 判断题 main_pages.json存放页面page路径配置信息。&#xff08;正确&#xff09;DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。&#xff08;正确&#xff09; 单选题…