千家信息网

如何封装vue日历组件

发表于:2025-11-16 作者:千家信息网编辑
千家信息网最后更新 2025年11月16日,这篇文章将为大家详细讲解有关如何封装vue日历组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下图示封装的组件的代码如下

开始时间

{{starttime.substring(0,4)+'-'+starttime.substring(4,6)+'-'+starttime.substring(6,8)}}

结束时间

{{endtime==''?'请选择结束日期':endtime.substring(0,4)+'-'+endtime.substring(4,6)+'-'+endtime.substring(6,8)}}

上一月
{{Year}}年{{month}}月
下一月
{{item}}
{{item.value}}

使用方法

main,js引入 全局注册组件

import Calendar from './components/fz_zujian/Calendar.vue'    //日历组件Vue.component('Calendar',Calendar)

页面使用

{{str}}
data() { return { str: '', } } showmodel(){ this.$refs.chi1.showmask1() }, getChild(val) { this.str = val },

关于"如何封装vue日历组件"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

0