基于uni-app的 年-月-日 时 时间日期范围控件

一个使用 uni-app 开发的日期时间选择器组件，它包含了一个遮罩层（pickerMask）和一个日期时间选择器弹窗（picker-box）。这个组件允许用户选择一个时间范围，包括年、月、日和小时。

以下是代码的主要功能和特点：

模板分析

• 使用 标签构建组件的布局。
• pickerMask 是一个遮罩层，用于在点击时关闭选择器。
• picker-box 是包含实际选择功能的弹窗。
• operate-box 包含选择器的操作按钮，如“开始时间”、“结束时间”和“确定”。
• picker-view 是 组件，用于实现滚动选择功能。

脚本分析

Props

• timeType: 控制选择器显示的时间类型（年、年月、年月日、年月日时）。
• visable: 控制选择器的显示和隐藏。
• defaultDate: 组件初始化时的默认日期。
• minYear: 允许选择的最小年份。
• timeLimit: 是否限制选择的时间不能超过当前时间。
• deferYear: 如果 timeLimit 为 false，则限制最大年份为当前年份加上这个值。
• themeColor: 主题颜色，用于高亮显示。
• startText 和 endText: 分别为“开始时间”和“结束时间”的文本。

数据

• indicatorStyle: 选择器指示器的样式。
• touchIndex: 用于标记当前触摸的是开始时间还是结束时间。
• year、month、day、hour: 分别代表当前的年、月、日、小时。
• years、months、days、hoursList: 分别存储年、月、日、小时的数组。
• pickerValue: 的当前值。
• resultDate: 存储用户选择的日期时间结果。

方法

• returnHandle(): 阻止事件冒泡。
• setDate(): 设置默认日期。
• setPicker(date): 根据日期设置选择器的值。
• touchSelect(val): 触摸选择开始时间或结束时间。
• getDateTime(date): 获取并格式化日期时间。
• pickerChange(e): 值变化时的处理函数。
• maskClick(): 遮罩层点击事件，关闭选择器。
• pickerConfirm(): 确定按钮点击事件，触发确认选择的日期时间。

样式分析

• 使用 SCSS 编写的 scoped 样式，用于美化组件的外观。
• pickerMask: 遮罩层的样式。
• picker-box: 选择器弹窗的样式。
• operate-box: 操作按钮区域的样式。
• picker-view: 的样式。

使用方法

这个组件可以通过设置不同的 props 来定制不同的日期时间选择需求。例如，如果你想让用户选择一个日期范围，你可以设置 timeType 为 2，并处理 confirm 事件来获取用户选择的日期。

注意事项

• 组件的 defaultDate 属性用于双向绑定，即初始化组件时提供默认值，并在用户选择新的时间后更新。
• timeLimit 属性可以用来限制用户选择的时间不能超过当前时间。
• 组件提供了 confirm 事件，用于在用户点击确定后获取选择的日期时间。

这个组件提供了一个灵活的方式来选择日期和时间，适用于多种场景。你可以根据具体需求调整和扩展这个组件的功能。

代码如下

	
		<vi