在前端开发中，我们常常会使用到各种各样的框架和工具，其中 npm 是一个非常常用的包管理工具，而 @tinyjs/tinyjs-plugin-extract 则是一个非常实用的 npm 包，可以帮助我们更方便地抽取页面中的数据和样式。本文将详细介绍 @tinyjs/tinyjs-plugin-extract 的使用方法。
安装
使用 npm 安装 @tinyjs/tinyjs-plugin-extract：
npm install @tinyjs/tinyjs-plugin-extract --save
基本用法
- 引入包：
import extract from "@tinyjs/tinyjs-plugin-extract";
- 抽取数据和样式：
extract({
data: "selector",
css: "selector"
});其中，data 和 css 传入的是选择器。
高级用法
直接将抽取结果插入到某个元素里
extract({
data: "selector",
css: "selector",
target: "#target"
});把抽取结果插入到目标元素 #target 中。
载入外部样式表
extract({
data: "selector",
css: "path/to/custom.css"
});载入外部样式表 path/to/custom.css。
转换样式表中的单位
extract({
data: "selector",
css: "selector",
transform: {
unit: "vh",
precision: 2
}
});把样式表中的单位转换为 vh，并设置精度为 2。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- -----------------
-------
---- -
------- --
-------- --
-
---------- -
------ -----
---------- -------
------- - -----
-
------- -
----------------- --------
-------- -----
----------- -------
-
-- -
---------- -----
------------ -----
------- - - -----
-
- -
---------- -----
------- - - -----
-
------- -
----------------- --------
-------- -----
----------- -------
-
----- -
------ -----
---------- ------
------- - -----
-
--------
-------
------
---- ------------------
------- ---------------
---- -------------- ---------- ------------ --
----------- -- ------------
--------- -- - ----------- --- -------- ---------- ------- --- -------- --- -----------------
---------
------
-----------------
----
--------- ----- ---- ---- ---- ------------
-------- -- ---- ---- --- ------ ---- -----------
------------- ------ --- -- ---- ---- --- --------- -- ------------
-----
-------
------- ---------------
------------ ------ ---- ----------
---------
------
------- ------------------------
-------
--------- -------------------- ---- -------
------ ------- ---- --------------------------------
---------
----- -------- ----
---- -------- ----
------- ---------------
---
---------
----- --- ----
---- ------------
---------- -
----- ------
---------- -
-
---总结
@tinyjs/tinyjs-plugin-extract 是一个非常实用的 npm 包，在日常开发中可以帮助我们更快速地抽取页面数据和样式，并且其支持高级用法，使其更加灵活。学习使用该包，对我们的前端开发能力提升有着很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab181e8991b448d8460