引言
在前端类开发中，经常会遇到需要使用选择器的场景。通常情况下，我们会自己编写一个选择器，但是这样做的问题在于编写时间较长，并且难免会存在一些问题，比如兼容性和功能方面的问题。为了解决这些问题，我们可以使用开源的 JavaScript 库来实现选择器功能。
这里我们介绍一个针对选择器开发的 JavaScript 库 —— @mae/selectize。
@mae/selectize 旨在提供一个灵活的选择器，可用于内容展示和选项选择，在 React、Vue、Angular 等框架的应用中广泛使用。下面我们就开始介绍 @mae/selectize 的使用方法。
安装
使用 npm 进行安装：
npm install @mae/selectize
使用
基本用法
使用 @mae/selectize 的第一步是引用它。在你的 JavaScript 文件中添加以下代码：
import Selectize from '@mae/selectize';
接下来，我们可以在 HTML 中使用它：
<div id="selectize"></div>
然后我们在 JavaScript 中实例化 Selectize 并把它附加到我们创建的 DOM 元素上：
const selectize = new Selectize('#selectize', {
options: ['item1', 'item2', 'item3']
});现在，一个基本的 Selectize 组件就建好了，并且有三个选项可供我们选择。
配置
我们可以定义更多的配置项来自定义 Selectize，比如我们可以定义选项个数的最大值、对选项进行排序等等。
更多的配置项详见官方文档。
事件
Selectize 事件处理也非常简单。通过使用 on() 方法来在实例上监听事件。
selectize.on('change', (value) => {
console.log('当前选择的值：', value);
});Selectize 支持大量事件。更多详见官方文档。
自定义模板
@mae/selectize 也支持自定义模板，因此你可以按照自己的需要去编写展示值和文本的方式。
-- -------------------- ---- -------
----- --------- - --- ----------------------- -
-------- --
------ --------
----- -----------
------ ---------
-- -
------ --------
----- -----------
------ ---------
-- -
------ --------
----- -----------
------ ---------
---
------------- ------ -- -
------ ----- -------------------------------------------------------
--
--------------- ------ -- -
------ ----- -------------------------------------------------------
-
---在上述的代码中，我们定义了一个 itemTemplate 和一个 optionTemplate 来自定义展示选项的方式。我们把 pciture1/2/3 这三个图片作为文本内容展示，并为这三个选项添加了类名 picture。
汉化
你可以将其汉化，相信这样会让我们更加愉悦。
-- -------------------- ---- -------
------ --------- ---- -----------------
------------------------ ---------------- -
--- ---- - -----
--------- - -
--- ------- ------- ---------
------------- ---------
----- --------- -------
----- -- -------- ----------
------ -- -------- ------
--
--------------- - ----------- -
--- -------- - ----------------
------ ---------- -
-------------------- -----------
--------------------------------------- --------------- -- ----------
----------------------------------------------------------------------- -----------
------------------------------------------------------------------------------------------- --------------------------------
------------------------------------------------------------------- ------- ---------
--
-----
---
------------------------- ---------------- -
--- ---- - -----
--------- - -
--- ------- ------- --------
------------- -----------
----- --------- -------
----- -- -------- ----------
------ -- -------- ------
--
--------------- - ----------- -
--- -------- - ----------------
------ ---------- -
-------------------- -----------
--------------------------------------- --------------- -- ----------
----------------------------------------------------------------------- -----------
------------------------------------------------------------------------------------------- --------------------------------
------------------------------------------------------------------- ------- ---------
--
-----
---
-- ------
--- ---------- - ---
-------------- - --------------- --------- -
-- ----------------------- - --- -
---------- - ------------------- ------ ------------------- -------------------
- ---- -
---------- - ------------------- ------ ------------------- ------------------ ------------------- --------------------
-
-- --------------------- - - -- ------ ---------- -- ------------ -
----------------------------------
-
--最后附上一个完整的汉化实例代码：
-- -------------------- ---- -------
------ --------- ---- -----------------
------------------------ ---------------- -
--- ---- - -----
--------- - -
--- ------- ------- ---------
------------- ---------
----- --------- -------
----- -- -------- ----------
------ -- -------- ------
--
--------------- - ----------- -
--- -------- - ----------------
------ ---------- -
-------------------- -----------
--------------------------------------- --------------- -- ----------
----------------------------------------------------------------------- -----------
------------------------------------------------------------------------------------------- --------------------------------
------------------------------------------------------------------- ------- ---------
--
-----
---
------------------------- ---------------- -
--- ---- - -----
--------- - -
--- ------- ------- --------
------------- -----------
----- --------- -------
----- -- -------- ----------
------ -- -------- ------
--
--------------- - ----------- -
--- -------- - ----------------
------ ---------- -
-------------------- -----------
--------------------------------------- --------------- -- ----------
----------------------------------------------------------------------- -----------
------------------------------------------------------------------------------------------- --------------------------------
------------------------------------------------------------------- ------- ---------
--
-----
---
-- ------
--- ---------- - ---
-------------- - --------------- --------- -
-- ----------------------- - --- -
---------- - ------------------- ------ ------------------- -------------------
- ---- -
---------- - ------------------- ------ ------------------- ------------------ ------------------- --------------------
-
-- --------------------- - - -- ------ ---------- -- ------------ -
----------------------------------
-
--
-- ----------
----------------------- ---- -- --------以上就是 @mae/selectize 的使用教程。可以发现，@mae/selectize 非常简单易用，同时也提供了大量的配置选项，为我们提供了很多便利。希望大家在开发中能够使用到它们，提高开发效率，完成更好的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddad0