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,一经查实,立即删除!

相关文章

Docker 容器管理和镜像管理基础知识(二)

Docker 容器管理和镜像管理 容器管理 docker create 命令用于在 Docker 中创建一个新的容器&#xff0c;但不会自动启动它。这个命令会返回容器的 ID&#xff0c;可以使用它来 进一步操作容器&#xff0c;这也是与 docker run 命令的一个区别 以下是 docker create 的基本用…

Kotlin 作用域函数

作用域函数&#xff08;Scope Functions&#xff09; 函数参数返回值说明letitlambda result非空对象执行代码块applythis上下文对象用于对象配置操作alsoit上下问对象执行额外操作runthislambda result用于对象配置和计算结果withthislambda result非扩展函数&#xff0c;配置…

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深度学习模型需要大量干净的…

Vue3中如何安装和配置静态路由

1.安装vue-router pnpm i vue-router 2.在src下闯将router目录&#xff0c;在它下边再建一个index.ts,用来创建路由和配置静态路由&#xff08;静态路由就是不管哪个用户都会有的路由页面&#xff0c;比如&#xff0c;登陆页面&#xff0c;主页面&#xff0c;404页面&#…

窗体内元素遍历-通用方法(DevExpress 中BarManager的遍历)

因为一些业务需求&#xff0c;需要对WinForm窗体中的BarManager进行遍历设置。但是DevExpress.XtraBars.BarManager 没有继承Control基类&#xff0c;所以无法使用this.Controls进行遍历。 可以使用下面代码进行遍历&#xff1a; private object SearchBarManager(){try{Syste…

c++ execl 执行 重定向

#include <unistd.h>int main() {pid_t childPid fork(); // 创建子进程if (childPid 0) {// 子进程// 关闭标准输入、输出和错误流close(STDIN_FILENO);close(STDOUT_FILENO);close(STDERR_FILENO);// 打开要写入的文件int fd open("output.txt", O_WRONLY…

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

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

前端nginx配置指南

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