html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

项目:

原生的html,加jQuery使用不习惯,新html页面导入vue3,element plus做界面,现在需要把日历上英文切成中文。

最终效果:

导入能让element plus日历变成中文脚本: 

elementplus, vue3对应的js都可以通过创建一个vue3项目找到对应的脚本导入)

环境:

>1.node.js

> 2.npm

>3.vue cli :npm install -g @vue/cli

> 4.vue: npm install vue

## 创建工程vue3 + vite
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev 

///

安装element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

下载zh-cn.min.mjs:

 然后在node_modules对应目录的文件,把它拷贝到html项目即可

导入项目:zh-cn.min.mjs ,

 

html页面引用 

<!DOCTYPE html>
<html>
<head>
<!--  ElementPlus 日期控件el-date-picker换成中文-->
  <meta charset="UTF-8">
  <!-- import Vue before Element -->
  <script src="../js/vue3.3.8/vue.global.js"></script>
  <link rel="stylesheet" href="../js/elementPlus/index.css">
  <script src="../js/elementPlus/index.full.js"></script>
  <title></title>
  <script  type="module">
    import zhCn from "../js/elementPlus/locale/zh-cn.mjs";
    const {createApp, ref} = Vue
    const app = createApp({
      setup() {
        const value1=ref('')
        const message = ref('Hello vue!')
        return {
          message,value1
        }
      }
    })
    app.use(ElementPlus, {locale:zhCn})
    app.mount('#app')
  </script>
</head>
<body>
<div id="app">
  <!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->
  {{ message }}
  <el-button type="success">成功按钮</el-button>
  <el-progress type="circle" :percentage="20"></el-progress>
  <div class="block">
<!--    ElementPlus 日期控件el-date-picker换成中文-->
    <span class="demonstration">中文日历:</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a day"
    ></el-date-picker>
  </div>
  <el-divider></el-divider>
</div>
</body>
<!--<script type="module" src="../js/elementPlus/locale/zh-cn.mjs">
  import zhCn from "../js/elementPlus/locale/zh-cn.mjs";
</script>-->

</html>

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

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

相关文章

修改 docker /dev/shm 的大小

修改 docker /dev/shm 的大小 1&#xff0c;获取完整id&#xff1a; docker inspect 245| grep Id rootlynxi:~# docker inspect 245| grep Id"Id": "245ab167ed9a79873b31b3a38df2053870fe72f267c3c1a660df25c63e37e88b",2&#xff0c;修改 ShmSize&…

vueRouter 配合 keep-alive 不生效的问题

文章目录 问题说明案例复现demo 结构问题复现和解决 其实这个不生效的问题根本也不算一个问题&#xff0c;犯的错和写错单词差不多&#xff0c;但是也是一时上头没发现&#xff0c;所以记录一下&#xff0c;如果遇到同样的问题&#xff0c;也希望可以帮助你早点看到这个哭笑不得…

网络技术基础入门全套实验-厦门微思网络CCNA实验手册

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 微思简介&#xff08;https://www.xmws.cn) 微思成立于2002年&#xff0c;是一个诚信敬业、积极向上、充满活力、专注技术服务的企业。 微思获得了八…

【SpringBoot+dubbo+zk】实现服务之间rpc通信

0)前置准备&#xff0c;我们使用zk作为注册中心&#xff0c;先启动zk&#xff0c;也就是2181端口。 1)父工程pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http…

[SpringBoot]自定义注解@AutoFill,实现公共字段自动填充(避免重复对时间属性初始化

对于时间属性&#xff0c;如createTime、updateTime在进行插入、修改操作时都要一个个初始化处理&#xff0c;过于麻烦。 可以自定义注解AutoFill作用于INSERT&#xff0c;UPDATE操作方法上&#xff0c;再自定义切面类&#xff0c;统一拦截加入了AutoFill注解的方法&#xff0c…

PAT 乙级 1076 Wifi密码

解题思路&#xff1a;首先这题看着复杂实际很简单&#xff0c;每题就一个正确的我们把他找出来就可以&#xff0c;之后利用和’A’ 相减加一 求出数值&#xff0c;输出即可。python代码更容易 c语言: #include<stdio.h> int main() {int n,i,j,count0;scanf("%d&q…

[ffmpeg系列 03] 文件、流地址(视频)解码为YUV

一 代码 ffmpeg版本5.1.2&#xff0c;dll是&#xff1a;ffmpeg-5.1.2-full_build-shared。x64的。 文件、流地址对使用者来说是一样。 流地址(RTMP、HTTP-FLV、RTSP等)&#xff1a;信令完成后&#xff0c;才进行音视频传输。信令包括音视频格式、参数等协商。 接流的在实际…

【Spring实战】25 Spring Boot Admin 应用

文章目录 1. 查看健康信息2. 使用 Micrometer 和 "/metrics"3. 管理包和类的日志级别4. 其他功能总结 Spring Boot Admin 是一个功能强大的工具&#xff0c;用于监控和管理多个 Spring Boot 应用程序。通过上一篇文章 【Spring实战】24 使用 Spring Boot Admin 管理…

vue-springboot 音乐推荐系统 带歌词的音乐播放器系统设计与实现 7902c

少数民族音乐网站在流畅性&#xff0c;续航能力&#xff0c;等方方面面都有着很大的优势。这就意味着少数民族音乐网站的设计可以比其他系统更为出色的能力&#xff0c;可以更高效的完成最新的音乐信息、音乐资讯、在线交流等功能。 此系统设计主要采用的是JAVA语言来进行开发&…

240107-RHEL8+RHEL9配置安装:NVIDIA驱动(15步)+CUDA(4步)+CUDNN(5步)+GPU压力测试

Section 0: 基础知识 CUDA、cuDNN 和 PyTorch 版本的选择与搭配指南 安装优先级: 显卡驱动 → CUDA → CUDA Toolkit → cuDNN → Pytorch 即显卡驱动决定了CUDA版本&#xff0c;CUDA版本决定了CUDA Toolkit、cuDNN、Pytorch各自的版本提前下载 &#xff5c; CUDA提前下载 &am…

分布式系统架构设计之分布式消息队列基础知识

随着微服务、大数据和云计算的普及&#xff0c;分布式系统已经成为现代软件架构的核心。在分布式系统中&#xff0c;各个组件间的通信和数据交换尤其重要&#xff0c;而消息队列正是实现这一目标的关键技术之一。 在分布式架构设计过程中&#xff0c;架构师们需要对消息队列有…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于两阶段随机优化的电能量与深度调峰融合市场出清模型及定价方法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主的专栏栏目《论文与完整程序》 这个标题涉及到一个电力市场的建模和定价方法&#xff0c;采用了两阶段随机优化的策略&#xff0c;目标是实现电能量与深度调峰的融合。下面是对标题中各个…

逆向一个Go程序

前奏 事先声明&#xff0c;自导自演&#xff0c;纯属为了演示基本的逆向思维 用Go写一段模拟登录的代码&#xff1a; package mainimport ("fmt" )func main() {pass : ""fmt.Print("input password:")fmt.Scan(&pass)if pass "hel…

DTD(文档类型定义)

一、简介 为什么使用DTD 通过 DTD&#xff0c;您的每一个 XML 文件均可携带一个有关其自身格式的描述。 通过 DTD&#xff0c;独立的团体可一致地使用某个标准的 DTD 来交换数据。 而您的应用程序也可使用某个标准的 DTD 来验证从外部接收到的数据。 您还可以使用 DTD 来验…

【架构专题】不会业务稳定性建设架构师直接开除!!!

为什么要做业务稳定性建设&#xff1f; 首先&#xff0c;什么是业务稳定性建设&#xff1f;顾名思义&#xff0c;就是保证系统的稳定运行&#xff0c;让用户不受任何影响地使用产品。对于一个企业来说&#xff0c;这非常重要&#xff0c;因为如果产品出现问题&#xff0c;那么…

Kafka(六)消费者

目录 Kafka消费者1 配置消费者bootstrap.serversgroup.idkey.deserializervalue.deserializergroup.instance.idfetch.min.bytes1fetch.max.wait.msfetch.max.bytes57671680 (55 mebibytes)max.poll.record500max.partition.fetch.bytessession.timeout.ms45000 (45 seconds)he…

C++实现单例模式

单例模式&#xff1a; 一种设计模式&#xff0c;它的目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问这个实例。它适用于需要全局唯一的对象或资源的情况。 23种设计模式种最简单最常见的一种&#xff08;高频考点&#xff09; 要求&#xff1a;通过一个…

Python打印Python环境、PyTorch和CUDA版本、GPU数量名称等信息

代码&#xff1a; import torch import platformgpu_num torch.cuda.device_count() torch_version torch.__version__ python_version platform.python_version()print("Python Version: Python %s" % python_version) print("PyTorch Version: %s" %…

代码随想录刷题第四十二天| 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

代码随想录刷题第四十二天 今天是0-1背包问题&#xff0c;掌握了套路就不难了~~~ 0-1背包问题理论基础&#xff08;二维数组篇&#xff09;卡码网第46题 题目思路&#xff1a; 代码实现&#xff1a; input_line input() # 读取一行输入 mn input_line.split() m, n int…

Oracle-expdp备份变慢问题分析

问题背景&#xff1a; 应用有一个每日跑批之前的备份作业&#xff0c;通过expdp备份应用的用户数据&#xff0c;数据量大概为600G左右&#xff0c;正常情况下可以在20分钟内跑完&#xff0c;但最近expdp备份完成时间却突然猛涨到要2小时32分才能备份完&#xff0c;导致后续的跑…