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} = 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>
相关推荐
aesthetician2 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng5 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科6 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔8 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔8 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀8 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js