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-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.mfbz.cn/a/301701.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

4.vue学习(21-25)

文章目录 21.天气案例-监视属性引入22.监视属性23.深度监视24 监视的简写25 监视属性对比计算属性 21.天气案例-监视属性引入 效果&#xff1a;点击按钮&#xff0c;切换凉爽为炎热 vscode 开发vue的插件;vue 3 snippets 初步实现方式。计算属性&#xff1a; 案例中的坑&#…

山西电力市场日前价格预测【2024-01-09】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-09&#xff09;山西电力市场全天平均日前电价为314.92元/MWh。其中&#xff0c;最高日前电价为593.66元/MWh&#xff0c;预计出现在18:15。最低日前电价为54.95元/MWh&#xff0c;预计出…

SurfaceFlinger的commit/handleTransaction分析

整体背景介绍 hi&#xff0c;粉丝朋友们&#xff1a; 大家好&#xff01;本节我们来讲解一下SurfaceFlinger主要合成工作的第一个阶段任务commit 一般SurfaceFlinger端的合成工作主要有两个 1.commit 主要就是处理app端发起的一系列transaction的事务请求&#xff0c;需要对这…

uniapp 微信小程序跳转外部链接

一、背景&#xff1a; 开发小程序时&#xff0c;跳转到内部路径通常会使用&#xff1a;uni.navigateTo&#xff0c;uni.redirectTo&#xff0c;uni.reLaunch&#xff0c;uni.switchTab等方法&#xff0c;可以跳转到pages.json中已经注册的页面 uni.navigateTo(OBJECT) | uni-…

计算机毕业设计-----SSM CRM人事管理系统

项目介绍 CRM人事管理系统&#xff0c;主要功能有&#xff1a; 用户管理&#xff1a;用户查询、添加用户、编辑、删除&#xff1b; 职位管理&#xff1a;职位查询、添加职位、删除&#xff1b; 部门管理&#xff1a;部门查询、添加部门、删除&#xff1b; 员工管理&#xff1…

王者荣耀与元梦之星联名小乔皮肤即将下架!

即将下架&#xff01;几款皮肤你还不知道的&#xff0c;推荐一起看看&#xff01; 元梦之星即将下架皮肤&#xff1b;小乔、宝拉、小爱、大魔术师尼克。 小乔截止日期&#xff1a;2024年1.5日23.59正式下架 灵魂歌姬宝拉截止日期&#xff1a;2024年1.11日23.59正式下架 小爱…

Mysql死锁问题Deadlock found when trying to get lock;try restarting transaction

一、问题描述 今天测试在测试环境做压测&#xff0c;发现了一个报错&#xff0c;来找我帮忙看&#xff0c;如下图&#xff1a; 二、问题排查 先去服务器上&#xff0c;看看死锁的日志&#xff0c;找到 mysql 的安装路径&#xff0c;使用如下命令登录 mysql mysql -h 数据库IP…

计算机毕业设计-----ssm知识库管理系统

项目介绍 文件集中上传&#xff1a;系统支持单文件上传以及批量上传&#xff0c;系统支持zip、rar格式的压缩包导入。亮点创新 多格式文件在线预览 用户可以对所有公共文件进行浏览&#xff0c;支持office&#xff0c;pdf格式以及常见图片格式&#xff0c;音频格式&#xff0c…

BOM,JS执行机制等

1.BOM 概述 1.1什么是 BOM BOM( Browser Object Model &#xff09;即浏览器对象模型&#xff0c;它提供了独立于内容而与浏览器窗口进行交互的对象&#xff0c;其核心对象是window. BOM由一系列相关的对象构成&#xff0c;并且每个对象都提供了很多方法与属性。 BOM缺乏标…

基于ssm的孩童收养信息管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本孩童收养信息管理就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

二叉树的深度和高度问题(算法村第八关白银挑战)

二叉树的最大深度 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null…

揭开JavaScript数据类型的神秘面纱

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 JavaScript作为一门动态类型语言,其数据类型一直是开发者们关注的话题。本文将深入探讨Jav…

创建K8s节点的虚拟机

1、点击“创建新的虚拟机” 2、选择自定义&#xff0c;点击“下一步” 3、默认&#xff0c;点击“下一步” 4、默认&#xff0c;点击“下一步” 5、默认&#xff0c;点击“下一步” 6、设置虚拟机名称和位置&#xff0c;点击“下一步” 7、点击“下一步” 8、设置2048MB&#x…

x-cmd pkg | gitui - git 终端交互式命令行工具

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 gitui 由 Stephan D 于 2020 年使用 Rust 语言构建的 git 终端交互式命令行工具&#xff0c;旨在终端界面中便捷管理 git 存储库。 首次用户 使用 x gitui 即可自动下载并使用 在终端运行 eval "$(curl https:/…

C语言动态内存管理

我们目前知道的开辟内存空间的方法有&#xff1a; 1.创建变量 2.创建数组&#xff1b; 但是这2种方法开辟的空间大小都是固定的&#xff0c;如果是数组的话确认了大小之后是无法改变的&#xff1b; int a10;//在栈区空间上开辟4个字节的空间&#xff1b;int arr[10];//在栈…

【每日一题】回旋镖的数量

文章目录 Tag题目来源解题思路方法一&#xff1a;组合数学 写在最后 Tag 【组合数学】【数组】【2024-01-08】 题目来源 447. 回旋镖的数量 解题思路 方法一&#xff1a;组合数学 思路 以数组 points 中的每一个为回旋镖的中心 i&#xff0c;在数组 points 中找距离中心 i…

leetcode:滑动窗口

目录 1.定长滑动窗口 1.1 几乎唯一子数组的最大和(使用map来计数) 1.2 长度为k子数组中的最大和 2.不定长滑动窗口 2.1 最多k个重复元素的最长子数组 2.2 绝对差不超过限制的最长连续子数组(multiset&#xff09; 2.3 将x减到0的最小操作数(正难则反 逆向思维) 2.4 统计…

Windows Server 2003 (NT 5.2.3790.0) 构建指南

Windows Server 2003 (NT 5.2.3790.0) 构建指南 版本 10b&#xff0c;最后更新于 2021/10/21 原文 https://rentry.co/build-win2k3 指令在 XP SP3 x86、Win7 SP1 x86/x64 和 Win10 x64 下测试&#xff0c;结果在其他操作系统下可能会有所不同。 该指南由一位无名的匿名人士维…

每日算法打卡:子矩阵的和 day 8

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 原题链接 796. 子矩阵的和 题目难度&#xff1a;简单 题目描述 输入一个 n 行 m 列的整数矩阵&#xff0c;再输入 q 个询问&#xff0c;每个询问包含四个整数…
最新文章