前言
对于前端工程师来说，在开发业务系统时，时间范围筛选是非常常见的需求。只要是数据列表或者数据查询页面都离不了时间筛选，因此我们需要一个好用的时间范围组件来辅助我们完成工作。而 @beisen/upaas-time-range 就是一个非常优秀的时间范围组件 npm 包。本文将详细介绍 @beisen/upaas-time-range 的使用方法。
安装
使用 npm 命令进行安装：
npm install @beisen/upaas-time-range --save
使用方法
在使用 @beisen/upaas-time-range 之前，我们需要引入它的 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/@beisen/upaas-time-range/dist/index.css"> <script src="node_modules/@beisen/upaas-time-range/dist/index.js"></script>
我们也可以使用 npm 安装了 @beisen/upaas-time-range 后，在代码中使用：
import '@beisen/upaas-time-range/dist/index.css'
import TimeRange from '@beisen/upaas-time-range'
// 在需要使用的地方声明组件
components: {
TimeRange
}示例
我们来实现一个时间范围筛选组件，以 @beisen/upaas-time-range 为基础，实现一个时间范围选择器。
HTML 代码：
<div id="app"> <time-range start-date="" end-date="" @pick="onPick"></time-range> </div>
JS 代码：
-- -------------------- ---- -------
------ -----------------------------------------
------ --------- ---- --------------------------
--- -----
--- -------
----------- -
------------- ---------
--
----- -
---------- ---
-------- --
--
-------- -
------------- ---- -
-------------- - -----
------------ - ---
-
-
--可以看到，我们在 HTML 代码中定义了时间范围选择器，并将组件的两个属性 startDate 和 endDate 绑定到 data 中。在选择完时间范围后，通过 @pick 事件将开始时间和结束时间传递给 onPick 方法，在 onPick 中更新 data 中的 startDate 和 endDate。
API
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| formatDate | function | value => moment(value).format('YYYY-MM-DD') |
格式化时间 |
| startDate | string | '' | 开始时间 |
| endDate | string | '' | 结束时间 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| pick | start, end | 时间范围选择完毕后触发 |
深度探究
对于 @beisen/upaas-time-range 组件，我们可以发现它是基于 Element UI 的 DatePicker 组件封装而来的，所以我们也可以使用 Element UI 的 DatePicker 来实现时间范围选择器。但相较于 Element UI，@beisen/upaas-time-range 可以提供更简洁并且易用的 API。
结语
通过本文，我们较为全面地学习了 @beisen/upaas-time-range 的使用方法，并通过实际案例演示了如何使用 @beisen/upaas-time-range 来实现一个时间范围选择器。希望大家在日常开发中使用 @beisen/upaas-time-range 时能够更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e881e8991b448df251