介绍
oa-range 是一个可以方便地实现范围选择的 npm 包。它的主要特点是，支持多种类型的范围选择，比如时间范围选择、数字范围选择、日期范围选择等，同时还可以自定义开放式的范围选择器。
本文将详细介绍 oa-range 的使用方法，并通过示例代码，帮助读者快速上手 oa-range。
安装
使用 npm 进行安装：
$ npm install oa-range --save
使用
在模块中引入
在前端模块化环境中，可以直接引入 oa-range：
import Range from 'oa-range'; const rangeInstance = new Range();
API
oa-range 提供了一系列 API，可以方便地构建出不同类型的范围选择器。
Range.init()
在范围选择器元素上初始化 oa-range：
rangeInstance.init(element, config);
element: 开放式选择器的元素或选择器，或是现有的选择器 HTML DOM 元素。config(可选): 配置对象，可以使用配置如下：
{
type: 'single', // 选择类型，默认是 "single"
showCustomTypeToggle: false, // 是否显示切换自定义类型的选项， 默认 "false"
customTypes: [], // 自定义类型列表
}Range.setOptions()
设置 oa-range 范围选择器的某些选项：
rangeInstance.setOptions(options);
options: 选项对象，可以使用以下选项：
{
enabled: true, // 范围选择器是否启用，默认是 "true"
type: 'single', // 选择类型，默认是 "single"
customTypes: [], // 自定义类型列表
}Range.getType()
获取当前范围选择器的选择类型：
const type = rangeInstance.getType();
Range.setType()
通过代码的方式，改变范围选择器的选择类型：
rangeInstance.setType(type);
type: 新的选择类型。
Range.getCustomType()
获取当前开放式选择器的自定义类型：
const customType = rangeInstance.getCustomType();
Range.setCustomType()
通过代码的方式，改变开放式选择器的自定义类型：
rangeInstance.setCustomType(customType);
customType: 新的自定义类型。
Range.getRange()
获取当前范围选择器的选择范围：
const range = rangeInstance.getRange();
Range.setRange()
通过代码的方式，改变范围选择器的选择范围：
rangeInstance.setRange(range);
range: 新的选择范围。
示例代码
基本使用
<body>
<input type="text" id="input" />
<script>
import Range from 'oa-range';
const rangeInstance = new Range();
rangeInstance.init('#input');
</script>
</body>自定义类型
-- -------------------- ---- -------
------
------ ----------- ---------- --
--- -----------
--- ----------------------
--- -----------------------
--- ------------------------
-----
--------
------ ----- ---- -----------
----- ------------- - --- --------
---------------------------- -
--------------------- -----
------------ --
----- ------
------ ----
--------------- -
----- ----- - ------------------------
----- --- - ------------------------ --------
------ ------- -----
-
-- -
----- -------
------ ----
--------------- -
----- ----- - -------------------------
----- --- - ------------------------ ---------
------ ------- -----
-
-- -
----- --------
------ ----
--------------- -
----- ----- - --------------------------
----- --- - ------------------------ ----------
------ ------- -----
-
--
---
----- ----- - ---------------------------------
------------------------------- --- -- -
-- ------------------------------- --- ----- -
----- ---- - -----------------------------------
----------------------------------
-
---
---------
-------结语
到这里，我们已经完成了 oa-range 的介绍和使用教程。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66f81