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

news2024/9/29 9:35:08

项目情况

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-picker
          v-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.coloradmin.cn/o/1363494.html

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

相关文章

【深度deepin】深度安装,jdk,tomcat,Nginx安装

目录 一 深度 1.1 介绍 1.2 与别的操作系统的优点 二 下载镜像文件及VM安装deepin 三 jdk&#xff0c;tomcat&#xff0c;Nginx安装 3.1 JDK安装 3.2 安装tomcat 3.3 安装nginx 一 深度 1.1 介绍 由深度科技社区开发的开源操作系统&#xff0c;基于Linux内核&#xf…

基于JAYA算法优化的Elman神经网络数据预测 - 附代码

基于JAYA算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于JAYA算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于JAYA优化的Elman网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针…

解决pip安装第三库echarts报错:Package would be ignored而安装失败的问题

现象&#xff1a; 尝试了很多方法都没解决 &#xff0c;最后终于突然灵光一闪找到原因&#xff08;我这是python虚拟环境&#xff0c;创建的时候会自动升级pip&#xff09; 原因&#xff1a; pip版本过高&#xff01; 想不到是这原因吧&#xff01; 解决办法&#xff1a;手动…

面向对象进阶(static关键字,继承,方法重写,super,this)

文章目录 面向对象进阶部分学习方法&#xff1a;今日内容教学目标 第一章 复习回顾1.1 如何定义类1.2 如何通过类创建对象1.3 封装1.3.1 封装的步骤1.3.2 封装的步骤实现 1.4 构造方法1.4.1 构造方法的作用1.4.2 构造方法的格式1.4.3 构造方法的应用 1.5 this关键字的作用1.5.1…

ejs默认配置 原型链污染

文章目录 ejs默认配置 造成原型链污染漏洞背景漏洞分析漏洞利用 例题 [SEETF 2023]Express JavaScript Security ejs默认配置 造成原型链污染 参考文章 漏洞背景 EJS维护者对原型链污染的问题有着很好的理解&#xff0c;并使用非常安全的函数清理他们创建的每个对象 利用Re…

DNS主从服务器、转发(缓存)服务器

一、主从服务器 1、基本含义 DNS辅助服务器是一种容错设计&#xff0c;考虑的是一旦DNS主服务器出现故障或因负载太重无法及时响应客户机请求&#xff0c;辅助服务器将挺身而出为主服务器排忧解难。辅助服务器的区域数据都是从主服务器复制而来&#xff0c;因此辅助服务器的数…

自动化文件处理软件FileFlows

什么是 FileFlows &#xff1f; FileFlows 是一款文件处理软件&#xff0c;可以转码、转换、压缩和管理任何文件类型&#xff0c;包括视频、音频、图像和漫画书。它支持多个平台、硬件编码器以及强大的流程和报告功能。 FileFlows 通过监视“库”&#xff08;文件夹/路径&#…

3D人体姿态估计(教程+代码)

3D人体姿态估计是指通过计算机视觉和深度学习技术&#xff0c;从图像或视频中推断出人体的三维姿态信息。它是计算机视觉领域的一个重要研究方向&#xff0c;具有广泛的应用潜力&#xff0c;如人机交互、运动分析、虚拟现实、增强现实等。 传统的2D人体姿态估计方法主要关注通…

SPRING BOOT发送邮件验证码(Gmail邮箱)

SPRING BOOT邮件发送验证码 一、Gmail邮箱配置 1、进入Gmail(https://mail.google.com) 2、打开谷歌右上角设置 3、启用POP/IMP 4、启用两步验证(https://myaccount.google.com/security) 5、建立应用程式密码 6、复制保存应用程式密码 二、代码 1、引入依赖 <d…

Java序列化篇----第二篇

系列文章目录 文章目录 系列文章目录前言一、Serializable 实现序列化二、writeObject 和 readObject 自定义序列化策略三、序列化 ID四、序列化并不保存静态变量五、Transient 关键字阻止该变量被序列化到文件中六、序列化(深 clone 一中实现)前言 前些天发现了一个巨牛的人…

Java线程同步机制

第1章&#xff1a;引言 大家好&#xff0c;我是小黑。今天咱们来聊聊并发编程&#xff0c;咱们经常听说并行、并发这些词&#xff0c;特别是在处理大量数据、高用户负载时&#xff0c;这些概念就显得尤为重要了。为什么呢&#xff1f;因为并发编程可以帮助咱们的应用程序更有效…

GO语言笔记1-安装与hello world

SDK开发工具包下载 Go语言官网地址&#xff1a;golang.org&#xff0c;无法访问Golang中文社区&#xff1a;首页 - Go语言中文网 - Golang中文社区下载地址&#xff1a;Go下载 - Go语言中文网 - Golang中文社区 尽量去下载稳定版本&#xff0c;根据使用系统下载压缩包格式的安装…

Dubbo入门介绍和实战

1. 引言 Dubbo是一款开源的高性能、轻量级的Java RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;旨在解决分布式服务之间的通信问题。本文将介绍Dubbo的基础概念、核心特性以及使用场景&#xff0c;包括实际示例演示。 2. 什么是Dubbo&#xff1f; Dubbo是阿里巴…

java碳排放数据信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web碳排放数据信息管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环 境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为…

Visual Studio Code安装C#开发工具包并编写ASP.NET Core Web应用

前言 前段时间微软发布了适用于VS Code的C#开发工具包&#xff08;注意目前该包还属于预发布状态但是可以正常使用&#xff09;&#xff0c;因为之前看过网上的一些使用VS Code搭建.NET Core环境的教程看着还挺复杂的就一直没有尝试使用VS Code来编写.NET Core。不过听说C# 开发…

【Java技术专题】「攻破技术盲区」攻破Java技术盲点之unsafe类的使用指南(打破Java的安全管控— sun.misc.unsafe)

Java后门机制 — sun.misc.unsafe 打破Java的安全管控关于Unsafe的编程建议实例化Unsafe后门对象使用sun.misc.Unsafe创建实例单例模式处理实现浅克隆&#xff08;直接获取内存的方式&#xff09;直接使用copyMemory原理分析 密码安全使用Unsafe类—示例代码 运行时动态创建类超…

centos通过yum 安装nginx和基本操作

Yum安装Nginx 1、配置Centos 7 Nginx Yum源仓库(注意系统版本要匹配&#xff0c;此步根据环境来确认&#xff0c;不是必须的&#xff09; rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 2、安装Nginx yum install n…

深度学习|10.5 卷积步长 10.6 三维卷积

文章目录 10.5 卷积步长10. 6 三维卷积![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5bfa24f57964b0f81f9602f5780c278.png) 10.5 卷积步长 卷积步长是指每计算一次卷积&#xff0c;卷积移动的距离。 设步长为k&#xff0c;原矩阵规模为nxn&#xff0c;核矩阵…

静态网页设计——环保网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV1BC4y1v7ZY/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS&#xff08;…

【大数据进阶第三阶段之Hive学习笔记】Hive基础入门

目录 1、什么是Hive 2、Hive的优缺点 2.1、 优点 2.2、 缺点 2.2.1、Hive的HQL表达能力有限 2.2.2、Hive的效率比较低 3、Hive架构原理 3.1、用户接口&#xff1a;Client 3.2、元数据&#xff1a;Metastore 3.3、Hadoop 3.4、驱动器&#xff1a;Driver Hive运行机制…