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页面引用 

注意:

html需要引入模块,需要使用到ES6的特性,script 使用:  type=module

  <script  type="module">
    import zhCn from "../js/elementPlus/locale/zh-cn.mjs";

..</script>

<!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} = Vueconst 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-pickerv-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>

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

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

相关文章

2023年12月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:数的输入和输出 输入一个整数和双精度浮点数,先将浮点数保留2位小数输出,然后输出整数。 时间限制:1000 内存限制:65536 输入 一行两个数,分别为整数N(不超过整型范围),双精度浮点数F,以一个空格分开。 输出 一行两个数,分…

首次落地零担快运!商用车自动驾驶跑出交付加速度

即将迈入2024年&#xff0c;还活着的自动驾驶玩家&#xff0c;身上有两个显著标签&#xff1a;选对了细分赛道、会玩。 10月以来&#xff0c;Cruise宣布在美国德州奥斯汀、休斯顿、亚利桑那州凤凰城和加州旧金山全面停止所有自动驾驶出租车队运营服务&#xff0c;通用汽车计划…

Spark与云存储的集成:S3、Azure Blob Storage

在现代数据处理中&#xff0c;云存储服务如Amazon S3和Azure Blob Storage已成为存储和管理数据的热门选择。与此同时&#xff0c;Apache Spark作为大数据处理框架也备受欢迎。本文将深入探讨如何在Spark中集成云存储服务&#xff0c;并演示如何与S3和Azure Blob Storage进行互…

Java 对象的内存布局

目录 一. 前言 二. Java 对象的内存布局 三. Java 对象结构 3.1. 对象头 3.1.1. Mark Word 3.1.2. 类型指针&#xff08;Class Metadata Pointer&#xff09; 3.1.3. 数组长度&#xff08;Length&#xff09; 3.2. 实例数据 3.3. 对齐填充&#xff08;Padding&#xf…

【Github-Action】GithubAction 环境下,如何将临时生成的文件推送至指定分支。

通过这篇文章你可以掌握如何将github action 环境下临时生成的文件推送至指定分支&#xff0c;并且可以打开利用github开放的api做各种强大或有趣的事情的视野和思路。 如果你对github-action感兴趣&#xff0c;还可以看这篇文章&#xff0c; 这篇文章教会你如何开发Github Act…

牛刀小试---二分查找(C语言)

题目&#xff1a;在给定的升序数组中查找指定的数字n&#xff0c;并输出其下标 代码举例&#xff1a; #include <stdio.h> int main() {int arr[] { 1,2,3,4,5,6,7,8,9,10 };//给定的升序数组int left 0;//定义左下标int right sizeof(arr) / sizeof(arr[0]) - 1;//…

Hive基础知识(七):Hive 数据类型全解

1. 基本数据类型 对于 Hive 的 String 类型相当于数据库的 varchar 类型&#xff0c;该类型是一个可变的字符串&#xff0c;不过它不能声明其中最多能存储多少个字符&#xff0c;理论上它可以存储2GB 的字符数。 2. 集合数据类型 Hive 有三种复杂数据类型 ARRAY、MAP 和 STRUCT…

08、Kafka ------ 消息存储相关的配置-->消息过期时间设置、查看主题下的消息存活时间等配置

目录 消息存储相关的配置★ 消息的存储介绍★ 消息过期时间及处理方式演示&#xff1a;log.cleanup.policy 属性配置 ★ 修改指定主题的消息保存时间演示&#xff1a;将 test2 主题下的消息的保存时间设为10个小时1、先查看test2主题下的配置2、然后设置消息的保存时间3、然后再…

Element Plus 离线手册 下载

Element Plus (Vue3) 离线手册&#xff0c;解压就能用&#xff0c;双击运行&#xff0c;浏览器访问 http://localhost:7011 获取方式&#xff1a;原文关注微信公众号&#xff0c;回复消息&#xff1a;7011ELP Element Plus 离线手册 下载Vue3 Element Plus 离线手册 离线文档 …

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…

景联文科技:以高质量数据赋能文生图大模型

1月5日&#xff0c;在智求共赢・中国AIGC产业应用峰会暨无界AI生态合作伙伴大会上&#xff0c;中国AIGC产业联盟联合无界AI发布了《中国AIGC文生图产业白皮书2023》&#xff0c;从AIGC文生图发展历程、主流工具、产业实践以及规模预测等多个维度&#xff0c;全面揭示了中国AIGC…

【elastic search】JAVA操作elastic search

目录 1.环境准备 2.ES JAVA API 3.Spring Boot操作ES 1.环境准备 本文是作者ES系列的第三篇文章&#xff0c;关于ES的核心概念移步&#xff1a; https://bugman.blog.csdn.net/article/details/135342256?spm1001.2014.3001.5502 关于ES的下载安装教程以及基本使用&…

节省时间:AI 模型靠谱下载方案汇总

这篇文章&#xff0c;想分享下我日常是如何下载模型的&#xff0c;包括下载来源和工具使用细节&#xff0c;希望对折腾模型的你也有帮助。 也希望开源和 AI 领域的研究者、从业者在做技术调研和落地实践的时候&#xff0c;都能节约一些时间。 写在前面 之前写了很多模型相关…

微信小程序:发送小程序订阅消息

文档&#xff1a;小程序订阅消息&#xff08;用户通过弹窗订阅&#xff09;开发指南 目录 步骤一&#xff1a;获取模板 ID步骤二&#xff1a;小程序端获取参数2.1、获取消息下发权限2.2、获取登录凭证&#xff08;code&#xff09; 步骤三&#xff1a;后端调用接口下发订阅消息…

【Web】CTFSHOW PHP命令执行刷题记录(全)

目录 web29 web30 web31 web32 web33 web34 web35 web36 web37-39 web40 web41 &#xff08;y4✌脚本&#xff09; web42 -44 web45 web46 -49 web50 web51 web52 web53 web54 web55-56 web57 web58 web59 web60 web61 web62 web63-65 web66-67 w…

QT 信号与槽

.h文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();public slots:void buttonLable();priv…

rke2 Online Deploy Rancher v2.8.0 latest (helm 在线部署 rancher v2.8.0)

文章目录 1. 简介2. 预备条件3. 安装 helm4. 安装 cert-manager4.1 yaml 安装4.2 helm 安装 5. 安装 rancher6. 验证7. 界面预览 1. 简介 Rancher 是一个 Kubernetes 管理工具&#xff0c;让你能在任何地方和任何提供商上部署和运行集群。 Rancher 可以创建来自 Kubernetes 托…

文档扫描与矫正-仿射变换

图像变换是计算机视觉和图像处理中的关键技术之一&#xff0c;它允许我们对图像进行各种形式的变形、调整和校正。其中&#xff0c;仿射变换是一种常见的变换方式。 在文档扫描过程中&#xff0c;由于拍摄角度和畸变等原因&#xff0c;文档图像可能存在一定程度的形变。仿射变…

【LeetCode】组合两个表(mysql)

题目 编写解决方案&#xff0c;报告 Person 表中每个人的姓、名、城市和州。如果 personId 的地址不在 Address 表中&#xff0c;则报告为 null 。 以 任意顺序 返回结果表。 结果格式如下所示。 答 select firstName ,lastName,city,state from Person left join Address …

软路由之爱快基于L2TP 实现

申明&#xff1a;本文仅针对国内SSTP&#xff0c;适用于国内的游戏加速&#xff0c;禁止一切利用该技术的翻墙行为。 相信很多接触过爱快的人都需要连接L2TP或PPTP&#xff0c;本文主要介绍通过爱快iKuai的L2TP 来实现异地组网。 一、准备工作 1、爱快 v3.x 2个&#xff08;免…