日期组件

1 .使用dayjs这个三方库,得出来的月份,星期日都是从0开始的。所以这些地方都要重点照顾,天是对的。
2 .v-bind可以动态赋值传递props,而且任何类型的值都可以传递给props.
3 .将一个对象的所有属性作为prop传入,可以使用不带参数的v-bind="post"来代替原来的每个单独传入

props的一些知识

1 .单向数据流,父级的prop的更新会向下流动到子组件中,但是反过来是不行的,为了避免子组件意外的改变父组件的状态,从而导致数据的流向难以理解
2 .每当父组件发生改变的时候,子组件的所有prop都会刷新为最新值,这就意味者你不应该在一个子组件内部改变prop,如果你这样做了,Vue会报错
3 .需要改变prop的两种情况:希望把接收的prop作为本地数据来使用,定义一个本地的data属性并将这个prop作为其初始值。
4 .prop以原始值传入,并且需要转换:将其放在computed里面,那不就是element里面写组件的时候了么。。。
5 .对象和数组是通过引用传入的,所以对一个数组或者是对象类型的prop来说,在子组件中改变这个对象或者数据本身将会影响到父组件的状态
6 .动态加入的样式如何覆盖之前的样式,如果按照权重来自定义实现的化,那就要在一开始设计css的时候就要想到,目前最简单的就是直接加 !import
7 .使用z-index来保证永远是在最上面的。
8 .本来的日期周日是0,但是这样算的话可能需要分类,所以直接把0变成7这样统一来计算,这样的话不论是传的时候还是后来结算的时候,也是很放方便的。

传入非prop的特性处理情况

1 .传入到一个组件的props,但是改组件并没有相应prop定义的特性。
2 .绝大多数特性来说,从外部提供给组件的值会替换掉组件内部设置好的值,特别的class,style特性来说,两边的值都会被合并起来,从而得到最终的值
3 .inheritAttrs:false这个特性暂时看不懂,需要从例子中去看。

目前bug

1 .由于日期是我直接++,--,所以你选到0的时候在往前选年会出错,一般情况下是不糊i出现这个错误的,但是如果非要出错误也是可以的

未实现功能-对比elemnt

1 .支持一系列的日期格式选择,并且可以配置自己想要的日期格式。因为用的是一个框架库,可能一些特别偏的格式可能不能生成。
2 .日期范围的没有实现,比如选择一段的时间范围选项
3.其他快捷日期:现在只支持一个一个的选,不支持年和月份的列表选择

实现思路

css方面

1 .整体布局使用flex,特别是对于类似于日期排列这种特别规则的元素,通过设置大小可以很方便的实现日历的效果
2 .一些过渡实现的优化操作,在Vue里面使用css实现的效果

js方面

1 .使用dayjs类库,只要首先找到本月的第一天是周几,根据这个定位实现一个数组,以第一天为第一个,根据是周几来算给这个数组从前或者从后所需要添加的日期,从而实现一个需要渲染整个日历组件一个显示单元的所有数据
2 .把这个函数分离,接下来选择下一个月或者上一年的操作只需要更换传入参数即可
3 .还有一个就是父子组件的交互,分别是prop和emit从子往父传入。

你可能感兴趣的:(日期组件)