npm 包 wovue-focus-trap 的使用教程-JavaScript中文网-JavaScript教程资源分享门户

focus-trap 是一个用来限制焦点范围的库，也就是在某一区域内禁止鼠标或者键盘获得焦点，以达到更好的用户体验。这个库应用广泛，而 wovue-focus-trap 作为适配 Vue 的一个 npm 包，也体现了 Vue 在前端开发领域中的重要性。

wovue-focus-trap 的基本使用

安装 wovue-focus-trap

可以通过 npm 安装 wovue-focus-trap
```
npm install wovue-focus-trap --save
```

在组件中引入 wovue-focus-trap

import FocusTrap from 'wovue-focus-trap';

在需要限制焦点范围的区域中添加 FocusTrap 组件

<div>
  <!-- your content -->
  <FocusTrap :active="true"></FocusTrap>
</div>

以上是 wovue-focus-trap 的基本使用方式，简单明了，不过却存在一些需要注意的点，下面就给大家介绍。

wovue-focus-trap 的参数及用法

wovue-focus-trap 提供了参数以及事件来增强其实用性.

active {Boolean}

active 表示 FocusTrap 是否生效，默认为 false ，即不生效。

<FocusTrap :active="true"></FocusTrap>

whenReady {Function}

组件在 mount 树上时会调用使用时传入的 whenReady 方法。 whenReady 参数可以保证 FocusTrap能够在组件完成初始化之后实现正确的聚焦点锁定范围。

export default {
  mounted() {
    // 关闭标识让用户敲下 Esc 键时还能够高效的处理逻辑
    this.$refs.focusTrap.$on('ready', () => {
      this.closed = true;
    });
  }
};

onDeactivate {Function}

当 FocusTrap 取消聚焦时，会调用由参数传入的 onDeactivate 方法。

<FocusTrap
  :active="isModalActive"
  v-on:deactivate="onDeactivate"
></FocusTrap>

useHiddenSentinel {Boolean}

如果在 FocusTrap 内部没有焦点可聚焦，则 useHiddenSentinel 将方法默认用一个隐藏的 Dom 元素（sentinels）来管理焦点。

<FocusTrap :useHiddenSentinel="true"></FocusTrap>

通过这个参数的设置，可以在有交互操作的时候让我们的聚焦点能够更加清晰。

escapeDeactivates {Boolean}

为 true，则当焦点在 FocusTrap 中时，用户按下 Escape 键时会自动停用 FocusTrap 这一行为。

<FocusTrap :escapeDeactivates="false"></FocusTrap>

clickOutsideDeactivates {Boolean}

FocusTrap 外点击时自动取消聚焦，收到clickOutsideDeactivates属性的影响。

<FocusTrap :clickOutsideDeactivates="true"></FocusTrap>

returnFocusOnDeactivate {Boolean | String | HTMLElement}

用于设定 FocusTrap 取消锁定后聚焦的元素。如果传入 true，则获取上一次的焦点，否则传入某个特定的节点。

<FocusTrap :returnFocusOnDeactivate="false"></FocusTrap>

initialFocus {String | HTMLElement}

当 FocusTrap 对象被激活，焦点会聚焦于其 nested 元素上，而使用 initialFocus 属性，则可以让聚焦的点变得清晰。

<FocusTrap :initialFocus="'#button'"></FocusTrap>

关于无障碍体验，我在这篇文章中写了一些内容。大家可以参考。

完整的示例代码

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

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

总结

wovue-focus-trap 帮助我们解决了一些无障碍体验的需求，如当我们经常需要一个交互窗口向用户提示信息而用户可能会犯一个获焦错误这种行为，这个npm包的选择对我们大有裨益。我们通过深入地了解 wovue-focus-trap 的基本用法以及更加高级的使用方式，相信大家也能够更加高效地使用 wovue-focus-trap 在项目中，从而加速我们的前端开发。

以上就是 npm 包 wovue-focus-trap 的使用教程，希望能对大家有所帮助。

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