vue组件转换成dom元素_Vue组件可将焦点捕获在DOM元素内

vue组件转换成dom元素

焦点陷阱 (focus-trap-vue)

Vue component to trap the focus within a DOM element.

Vue组件可将焦点捕获在DOM元素内。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

npm install focus-trap focus-trap-vue

用法 (Usage)

This library exports one single named export FocusTrap and requires
focus-trap as a peer
dependency. So you can locally import the component or declare it globally:

该库将导出一个名为export FocusTrap单个库，并要求
focus-trap于同伴
依赖 。 因此，您可以本地导入组件或全局声明它：

import { FocusTrap } from 'focus-trap-vue'

Vue.component('FocusTrap', FocusTrap)

FocusTrap can be controlled in three different ways:

可以通过三种不同方式控制FocusTrap ：

• by using the active Boolean prop

  通过使用active 布尔道具

• by using v-model (uses the active prop)

  通过使用v-model (使用active道具)

• by calling the activate/deactivate method on the component

  通过调用组件上的activate / deactivate方法

The recommended approach is using v-model and it should contain one single child:

推荐的方法是使用v-model ，它应该包含一个孩子 ：

<focus-trap v-model="isActive">
  <modal-dialog tabindex="-1">
    <p>
      Do you accept the cookies?
    </p>
    <button @click="acceptCookies">Yes</button>
    <button @click="isActive = false">No</button>
  </modal-dialog>
</focus-trap>

When isActive becomes true, it activates the focus trap. By default it sets the focus to its child, so make sure the element is a focusable element. If it's not you wil need to give it the tabindex="-1" attribute. You can also customize the initial element focused. This element should be an element that the user can interact with. For example, an input. It's a good practice to always focus an interactable element instead of the modal container:

当isActive变为true ，它将激活焦点陷阱。 默认情况下，它将焦点设置为其子项，因此请确保该元素是可聚焦元素。 如果不是，则需要为其指定tabindex="-1"属性。 您也可以自定义初始元素。 该元素应该是用户可以与之交互的元素。 例如，输入。 始终将可交互元素而不是模式容器作为焦点是一个好习惯：

<focus-trap v-model="isActive" :initial-focus="() => $refs.nameInput">
  <modal-dialog>
    <p>
      What name do you want to use?
    </p>
    <form @submit.prevent="setName">
      <label>
        New Name
        <input ref="nameInput" />
      </label>
      <button>Change name</button>
    </form>
  </modal-dialog>
</focus-trap>

道具 (Props)

FocusTrap also accepts other props:

FocusTrap还接受其他道具：

• escapeDeactivates: boolean

  escapeDeactivates ： boolean

• returnFocusOnDeactivate: boolean

  returnFocusOnDeactivate ： boolean

• allowOutsideClick: boolean

  allowOutsideClick ： boolean

• initialFocus: string | (() => Element) Selector or function returning an Element

  initialFocus ： string | (() => Element) string | (() => Element) 选择器或函数返回一个Element

• fallbackFocus: string | (() => Element) Selector or function returning an
  Element

  fallbackFocus ： string | (() => Element) string | (() => Element) 选择器或函数返回一个
  元件

Please, refer to focus-trap documentation to know what they do.

请参考焦点陷阱文档以了解它们的作用。

大事记 (Events)

FocusTrap emits 2 events. They are in-sync with the prop active

FocusTrap发出2个事件。 它们与道具active同步

• activate: Whenever the trap activates

  activate ：每当陷阱激活时

• deactive: Whenever the trap deactivates (note it can also be deactivated by

  deactive ：无论何时停用陷阱(请注意，也可以通过以下方式停用陷阱：

  
  pressing
  紧迫

  Esc or clicking outside)

  Esc或单击外部)

方法 (Methods)

FocusTrap can be used without v-model. In that case, you will use the methods and probably need to initialize the trap as deactivated, otherwise, the focus will start as active:

FocusTrap可以在没有v-model情况下使用。 在这种情况下，您将使用这些方法，并且可能需要将陷阱初始化为deactivated ，否则，焦点将开始为active：

<button @click="() => $refs.focusTrap.activate()">Show the modal</button>

<focus-trap :active="false" ref="focusTrap">
  <modal-dialog>
    <p>Hello there!</p>
    <button @click="() => $refs.focusTrap.deactivate()">Okay...</button>
  </modal-dialog>
</focus-trap>

Note the use of arrow functions, this is necessary because we are accessing $refs which are unset on first render.

请注意箭头功能的使用，这是必要的，因为我们要访问在第一次渲染时未设置的$refs 。

有关 (Related)

• Focus Trap: https://github.com/davidtheclark/focus-trap

  焦点陷阱： https : //github.com/davidtheclark/focus-trap

翻译自: https://vuejsexamples.com/vue-component-to-trap-the-focus-within-a-dom-element/

vue组件转换成dom元素