vue和Ant Design Vue的日历/日期

最新推荐文章于 2025-06-24 11:20:47 发布

加油，前进

最新推荐文章于 2025-06-24 11:20:47 发布

阅读量537

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_63954739/article/details/132553598

文章讲述了在Vue3项目中，作者开始使用Element-plus时遇到的问题，转而采用AntDesignVue框架，并介绍了如何全局注册、引入并设置日期选择器为中文的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的时候有一个这样的页面，刚开始做项目用的是vue3和element-plus，但是element-plus里面没有一样的框架，于是本来准备原生写，写到一半有点小问题，就百度搜索了一下，结果有人说Ant Design Vue这个框架里面要，我就找到了Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsg

根据他的手册来完成页面，首先是引入

npm i --save ant-design-vue@4.x

然后全局完整注册main.js《我这个是全局注册，他还有局部注册组件和全局部分注册，如果要用别的可参照手册》

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
app.use(Antd);

html

<div :style="{ width: '350px' }">
	<a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" :locale="locale" />
</div>

页面现在已经出来了，但是他是英文的想把他转换成中文

在当前页面的script标签中添加js和绑定一下数据就好

<script>
   import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
   import 'dayjs/locale/zh-cn';
   export default {
	  data() {
              locale:locale,//绑定数据
             }
   }
</script>

这样就大功告成了，特别简单