二次封装el-date-picker组件

想要实现的效果是在现实日期的同时显示该日期的对应的价格涨幅等。并且以弹窗的方式显示，效果如下

首先是在css中，因为文件本身的style设置了scope，所以在使用了:deep()样式修改并不生效，因此是在外部新建一个css文件，并且在所需要的文件中引入。如在datepicker.css中写入

.el-picker-panel__content {

  top:-30px;

  background: #fff;

}

在用到日期的文件中引入即可生效。可以实现覆盖el-datepicker本身的框。

再是template方面，直接使用自定义即可

题外话：对于组件的传参，在使用props时对于父组件的多次变化子组件不能及时更新，对于我的方法是使用监听，监听变量的变化及时改变。例如

但是若是每个都要监听并不方便 而且在关闭的时候也会走一遍流程，有一些效果并不能实现 因此使用宏定义会比较好比如

在（）中的‘showView’便是父组件传进来的值，例如在父组件传值

在子组件中用const viewer=defindModel<boolean>('showview')

const type=defindModel=('type')接收即可

另外还用到的几个方法

穿进去的currentTime直接dayjs()或者dayjs().add(1, 'M')即可获取当前月和下个月的天数数组

传参dayjs().format('YYYY-MM-DD')即可。