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

news2024/9/24 7:22:48

项目:

原生的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>

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

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

相关文章

idea 以文本形式输出 SpringBoot项目 目录结构

第1步&#xff1a;AltF12 打开 Terminal 终端 第2步&#xff1a;cd 到 项目路径下 第3步&#xff1a;使用 tree 命令 结果 D:. ├─.mvn │ └─wrapper ├─applog │ └─logs ├─src │ ├─main │ │ ├─java │ │ │ └─com │ │ │ └─zhangziwa …

【软件测试】学习笔记-如何做好单元测试

什么是单元测试&#xff1f; 在正式开始今天的话题之前&#xff0c;我先给你分享一个工厂生产电视机的例子。 工厂首先会将各种电子元器件按照图纸组装在一起构成各个功能电路板&#xff0c;比如供电板、音视频解码板、射频接收板等&#xff0c;然后再将这些电路板组装起来构…

【计算机网络】网络编程套接字socket--UDP/TCP简单服务器实现/TCP协议通信流程

文章目录 一、预备知识1.IP和端口号2.TCP协议和UDP协议3.网络字节序 二、socket编程接口1.socket 常见API2.sockaddr结构 三、UDP服务器相关重要接口介绍sendtorecvfrompopen 1.udpServer.hpp2.udpServer.cc3.udpClient.hpp4.udpClient.cc5.onlineUser.hpp 四、TCP服务器socket…

高性能、可扩展、分布式对象存储系统MinIO的介绍、部署步骤以及代码示例

详细介绍 MinIO 是一款流行的开源对象存储系统&#xff0c;设计上兼容 Amazon S3 API&#xff0c;主要用于私有云和边缘计算场景。它提供了高性能、高可用性以及易于管理的对象存储服务。以下是 MinIO 的详细介绍及优缺点&#xff1a; 架构与特性&#xff1a; 开源与跨平台&am…

HTML---JavaScript操作DOM对象

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 本章目标 了解DOM的分类和节点间的关系熟练使用JavaScript操作DOM节点 访问DOM节点 能够熟练的进行节点的创建、添加、删除、替换等 能够熟练的设置元素的样式 能够灵活运用JavaScript获取元素…

SpringBoot学习(八)-SpringBoot + Dubbo + zookeeper

分布式DubboZookeeper 1、分布式理论 1&#xff09;什么是分布式系统&#xff1f; 在《分布式系统原理与范型》一书中有如下定义&#xff1a;“分布式系统是若干独立计算机的集合&#xff0c;这些计算机对于用户来说就像单个相关系统”&#xff1b; 分布式系统是由一组通过…

【AI视野·今日CV 计算机视觉论文速览 第284期】Fri, 5 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Fri, 5 Jan 2024 Totally 62 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Learning to Prompt with Text Only Supervision for Vision-Language Models Authors Muhammad Uzair Khattak, Muhammad F…

2024.1.7-实战-docker方式给自己网站部署prometheus监控ecs资源使用情况-2024.1.7(测试成功)

实战-docker方式给自己网站部署prometheus监控ecs资源使用情况-2024.1.7(测试成功) 目录 最终效果 原文链接 https://onedayxyy.cn/docs/prometheus-grafana-ecs 参考模板 https://i4t.com/ https://grafana.frps.cn &#x1f530; 额&#xff0c;注意哦: 他这个是通过frp来…

【Flutter 开发实战】Dart 基础篇:从了解背景开始

想要学会用 Flutter 开发 App&#xff0c;就不可避免的要学习另一门很有意思的编程语言 —— Dart。很多小伙伴可能在学习 Flutter 之前可能都没听说过这门编程语言&#xff0c;我也是一样&#xff0c;还以为 Dart 是为了 Flutter 而诞生的&#xff1b;然而&#xff0c;当我们去…

网页设计与制作web前端设计html+css+js成品。电脑网站制作代开发。vscodeDrea 【企业公司宣传网站(HTML静态网页项目实战)附源码】

网页设计与制作web前端设计htmlcssjs成品。电脑网站制作代开发。vscodeDrea 【企业公司宣传网站&#xff08;HTML静态网页项目实战&#xff09;附源码】 https://www.bilibili.com/video/BV1Hp4y1o7RY/?share_sourcecopy_web&vd_sourced43766e8ddfffd1f1a1165a3e72d7605

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

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

爬虫瑞数4案例:网上房地产

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、瑞数简介 瑞数动态安全 Botgate&#xff08;机器人防火墙&#xff09;以“动态安全”技术为核心&#xff0c;通过动态封装…

深度解析基于模糊数学的C均值聚类算法

深度解析基于模糊数学的C均值聚类算法 模糊C均值聚类 (FCM)聚类步骤&#xff1a;FCM Python代码&#xff1a; 模糊C均值聚类 (FCM) 在数据挖掘和聚类分析领域&#xff0c;C均值聚类是一种广泛应用的方法。模糊C均值聚类&#xff08;FCM&#xff09;是C均值聚类的自然升级版。相…

创建Vue3项目

介绍 使用命令创建vue3项目 示例 第一步&#xff1a;执行创建项目命令 npm create vuelatest第二步&#xff1a;填写输入项 第三步&#xff1a;进入study-front-vue3文件夹 cd study-front-vue3第四步&#xff1a;执行npm命令安装依赖 npm install第五步&#xff1a;运行…

Vue中Vuex的环境搭建和原理分析及使用

Vuex的环境搭建 Vuex是Vue实现集中式数据管理的Vue的一个插件&#xff0c;集中式可以理解为一个老师给多个学生讲课。 Vue2.0版本的安装&#xff1a; npm i vuex3 使用Vuex需要在store中的index.js引入Vuex和main.js中引入store,目的是让vm和vc都能看到$store。实现多个组件…

2024--Django平台开发-Django知识点(三)

day03 django知识点 项目相关路由相关 urls.py视图相关 views.py模版相关 templates资源相关 static/media 1.项目相关 新项目 开发时&#xff0c;可能遇到使用其他的版本。虚拟环境 老项目 打开项目虚拟环境 1.1 关于新项目 1.系统解释器命令行【学习】 C:/python38- p…

大模型LLM训练的数据集

引言 2021年以来&#xff0c;大预言模型的开发和生产使用呈现出爆炸式增长。除了李开复、王慧文、王小川等“退休”再创业的互联网老兵&#xff0c;在阿里巴巴、腾讯、快手等互联网大厂的中高层也大胆辞职&#xff0c;加入这波创业浪潮。 通用大模型初创企业MiniMax完成了新一…

目标检测-One Stage-YOLOv4

文章目录 前言一、目标检测网络组成二、BoF&#xff08;Bag of Freebies&#xff09;1. 数据增强2.语义分布偏差问题3.损失函数IoUGIoUDIoUCIoU 三、BoS(Bag of Specials)增强感受野注意力机制特征融合激活函数后处理 四、YOLO v4的网络结构和创新点1.缓解过拟合&#xff08;Bo…

基础数据结构

1. 单链表 #include<iostream>using namespace std; const int N 1e5 10;int n; // 分别存储当前节点的值&#xff0c;当前节点下一个节点的值&#xff0c;头结点&#xff0c;id号 int value[N], nepoint[N], head, idx;void init(){head -1;idx 0;}// 1.H 将某个x插…

Docker学习与应用(三)-Docker镜像理解

1、Docker镜像讲解 1&#xff09;镜像是什么 镜像是一种轻量级、可执行的独立软件包&#xff0c;用来打包软件运行环境和基于运行环境开发的软件&#xff0c;他包含运行某个软件所需的所有内容&#xff0c;包括代码、运行时库、环境变量和配置文件。 所有的应用&#xff0c;…