在当今的 Web 开发中，使用自定义元素已经成为一个很常见的事情。自定义元素让开发人员可以创建自己的 HTML 标记，并进行更加灵活的数据与 UI 展示操作。在这种情况下，@custom-elements/refresh-indicator 这个 npm 包就非常值得使用了，它可以帮助我们快速创建一个自定义元素，以显示应用程序的加载状态。
安装
首先需要将它安装到你的项目中进行使用。可以通过以下两种方式：
使用 npm
可以使用 npm 命令安装：
npm install @custom-elements/refresh-indicator
在 HTML 引入
也可以在 html 中引入：
<script src="https://cdn.jsdelivr.net/npm/@custom-elements/refresh-indicator@latest/dist/index.js"></script>
但我们建议使用 npm 版本来使用。
使用指南
安装完 @custom-elements/refresh-indicator 后，我们就可以在 HTML 中使用了。
创建自定义元素
首先需要创建一个自定义元素，继承于该 npm 包内的 RefreshIndicatorElement 类。
import { RefreshIndicatorElement } from '@custom-elements/refresh-indicator';
export class MyRefreshIndicator extends RefreshIndicatorElement {}设置默认属性
我们还可以为自定义元素设置默认属性，如下所示：
-- -------------------- ---- -------
------ - ----------------------- - ---- -------------------------------------
------ ----- ------------------ ------- ----------------------- -
------ --- -------------------- -
------ ----------- ---------
-
--- --------- -
------ -----------------------------
-
--- ------------ -
-- ----- -
---------------------------- ----
- ---- -
--------------------------------
-
-
--- ------- -
------ ---------------------------
-
--- ---------- -
-------------------------- -----
-
-观察 loading 和 error 这两个属性的变化，以便以后监听自定义元素的变化。
添加模板
设置了自定义元素的默认属性以后，我们就可以添加模板了。模板包括元素的 UI 和交互逻辑。
-- -------------------- ---- -------
------ - ----------------------- - ---- -------------------------------------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- -----
---------------- -------
------------ -------
------- -----
----------------- --------
---------- -----
------ -----
----------- - --- --- ------- -- -- -----
-
-------- -
------- - -----
-
----- -
---------- ---- -- ------ ---------
-------- -------------
------ -----
------- -----
------- --- ----- ------------
----------------- -----
------------------ -----
-------------- ----
-
---------- ---- -
-- -
---------- ---------------
-
-
--------
-----
----- ----------------
----- ------------ --------------------
----- ----------------------
-------
----- ------------- ------------------
------
--
------ ----- ------------------ ------- ----------------------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
------------- - ---------------------------------------
----------- - -------------------------------------
-
------ --- -------------------- -
------ ----------- ---------
-
--- --------- -
------ -----------------------------
-
--- ------------ -
-- ----- -
---------------------------- ----
- ---- -
--------------------------------
-
-
--- ------- -
------ ---------------------------
-
--- ---------- -
-------------------------- -----
-
-监听变化
最后还需要监听自定义元素的变化。
-- -------------------- ---- -------
------ - ----------------------- - ---- -------------------------------------
----- -------- - -----------------------------------
------------------ - -
---
------ ----- ------------------ ------- ----------------------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
------------- - ---------------------------------------
----------- - -------------------------------------
------------------------------ -- -- -
-- ------------ -
---------------------- ----------------------
-
---
-
------ --- -------------------- -
------ ----------- ---------
-
--- --------- -
------ -----------------------------
-
--- ------------ -
-- ----- -
---------------------------- ----
- ---- -
--------------------------------
-
-
--- ------- -
------ ---------------------------
-
--- ---------- -
-------------------------- -----
-
------------------------------ --------- --------- -
------ ------ -
---- ----------
-- -------------- -
--------------------------- - ---------------
- ---- -
--------------------------- - -------
-
------
---- --------
-- ---------- -
----------------------- - ---------
------------------------- - ---------------
- ---- -
----------------------- - ---
------------------------- - -------
-
------
-
-
-现在，我们已经可以创建一个简单的自定义元素，并使用它来创建一个类似于下拉刷新的 UI 了。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ - ----------------------- - ---- -------------------------------------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- -----
---------------- -------
------------ -------
------- -----
----------------- --------
---------- -----
------ -----
----------- - --- --- ------- -- -- -----
-
-------- -
------- - -----
-
----- -
---------- ---- -- ------ ---------
-------- -------------
------ -----
------- -----
------- --- ----- ------------
----------------- -----
------------------ -----
-------------- ----
-
---------- ---- -
-- -
---------- ---------------
-
-
--------
-----
----- ----------------
----- ------------ --------------------
----- ----------------------
-------
----- ------------- ------------------
------
--
------ ----- ------------------ ------- ----------------------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
------------- - ---------------------------------------
----------- - -------------------------------------
------------------------------ -- -- -
-- ------------ -
---------------------- ----------------------
-
---
-
------ --- -------------------- -
------ ----------- ---------
-
--- --------- -
------ -----------------------------
-
--- ------------ -
-- ----- -
---------------------------- ----
- ---- -
--------------------------------
-
-
--- ------- -
------ ---------------------------
-
--- ---------- -
-------------------------- -----
-
------------------------------ --------- --------- -
------ ------ -
---- ----------
-- -------------- -
--------------------------- - ---------------
- ---- -
--------------------------- - -------
-
------
---- --------
-- ---------- -
----------------------- - ---------
------------------------- - ---------------
- ---- -
----------------------- - ---
------------------------- - -------
-
------
-
-
-使用：
<my-refresh-indicator loading error="加载失败" />
总结
@custom-elements/refresh-indicator 是一个非常好用的 npm 包。它能够帮助开发人员快速创建自己的自定义元素，从而实现更加优秀的 UI 和交互体验。希望以上的介绍对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d5d81e8991b448e6fe6