npm 包 @mdxprograms/sidekick 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@mdxprograms/sidekick 是一个前端开发中使用的 npm 包，它可以帮助开发者更方便地管理和调试移动端和桌面端的布局。

安装

npm install @mdxprograms/sidekick

使用

引入

const sidekick = require("@mdxprograms/sidekick");

示例代码

给定以下 HTML 代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ----- --------------- ---------------------------- -----------------
  ------------ --------------
  -------
    ---- -
      ------- --
      -------- --
      ------- ------
      -------- -----
      ---------------- -------
      ------------ -------
    -
    ---- -
      ------ ------
      ------- ------
      ----------------- -----
    -
  --------
-------
------
  ---- ------------------
-------
-------

如果我们想检查 .box 元素的布局，可以这样使用 sidekick：

sidekick.showDimensions(".box");

在浏览器中打开这个 HTML 文件，打开开发者工具，会发现 .box 元素被一个边框框起来，上面显示了它的宽度和高度（即宽和高）。为了方便调试，我们可以在代码中添加样式覆盖这个边框的样式：

.sidekick {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background-color: #fff !important;
  border-bottom: none !important;
}

现在，刷新页面，再次打开开发者工具，我们会发现 .box 元素被一个矩形覆盖，并且右下角显示它的宽度和高度。

API

sidekick.showDimensions(selector: string, customStyle?: string)
- 参数
  - selector：元素的 CSS 选择器
  - customStyle：自定义样式
- 描述：展示选择器对应元素的宽度和高度
- 返回值：无
sidekick.showPosition(selector: string, customStyle?: string)
- 参数
  - selector：元素的 CSS 选择器
  - customStyle：自定义样式
- 描述：展示选择器对应元素的左上角和右下角的坐标
- 返回值：无
sidekick.showBorders(selector: string, customStyle?: string)
- 参数
  - selector：元素的 CSS 选择器
  - customStyle：自定义样式
- 描述：展示选择器对应元素的边框
- 返回值：无

结语

@mdxprograms/sidekick 对于前端开发来说，是一个非常实用的工具。通过本文的介绍，我们可以更好地了解它的使用方法和 API。希望大家可以通过这个工具更加高效地开发前端页面。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600668ebd9381d61a3540c5a