基于uni-app的 年-月-日 时 时间日期范围控件
一个使用 uni-app 开发的日期时间选择器组件，它包含了一个遮罩层（pickerMask）和一个日期时间选择器弹窗（picker-box）。这个组件允许用户选择一个时间范围，包括年、月、日和小时。
以下是代码的主要功能和特点：
模板分析
- 使用
<view>标签构建组件的布局。 pickerMask是一个遮罩层，用于在点击时关闭选择器。picker-box是包含实际选择功能的弹窗。operate-box包含选择器的操作按钮，如“开始时间”、“结束时间”和“确定”。picker-view是<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:<picker-view>的当前值。resultDate: 存储用户选择的日期时间结果。
方法
returnHandle(): 阻止事件冒泡。setDate(): 设置默认日期。setPicker(date): 根据日期设置选择器的值。touchSelect(val): 触摸选择开始时间或结束时间。getDateTime(date): 获取并格式化日期时间。pickerChange(e):<picker-view>值变化时的处理函数。maskClick(): 遮罩层点击事件，关闭选择器。pickerConfirm(): 确定按钮点击事件，触发确认选择的日期时间。
样式分析
- 使用 SCSS 编写的 scoped 样式，用于美化组件的外观。
pickerMask: 遮罩层的样式。picker-box: 选择器弹窗的样式。operate-box: 操作按钮区域的样式。picker-view:<picker-view>的样式。
使用方法
这个组件可以通过设置不同的 props 来定制不同的日期时间选择需求。例如，如果你想让用户选择一个日期范围，你可以设置 timeType 为 2，并处理 confirm 事件来获取用户选择的日期。
注意事项
- 组件的
defaultDate属性用于双向绑定，即初始化组件时提供默认值，并在用户选择新的时间后更新。 timeLimit属性可以用来限制用户选择的时间不能超过当前时间。- 组件提供了
confirm事件，用于在用户点击确定后获取选择的日期时间。
这个组件提供了一个灵活的方式来选择日期和时间，适用于多种场景。你可以根据具体需求调整和扩展这个组件的功能。
代码如下
<template><view :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle"><vi