Vue自定义日期选择器组件更新版

qqporch16570 9 0 zip 2023-06-08 16:06:18

实现思路1、显示部分包含一个输入框和一个下拉选择按钮,父级容器采用display:flex;justify-content: space-between;让两端靠边对齐2、下拉选择按钮用CSS样式描绘为向下的三角形3、显示部分下方设一个容器,上级容器样式为display:flex;flex-direction: column;实现纵向排列,该容器样式设置为position:relative;接着放置一个日历组件,该组件样式设置为position:absolute; 4、当点击下拉选择按钮(倒三角形)时,显示日历组件并附加全局click事件,click事件的作用是无论点击在哪里都会关闭日历组件。当点击日历区域时,阻止事件冒泡处理。否则就会响应到全局的click事件,把日历组件关掉了5、应用v-model实现数据双向绑定。更新版修复了一些Bug,增强了性能和易用性。

用户评论
请输入评论内容
评分:
暂无评论