vue组件转换成dom元素
焦点陷阱 (focus-trap-vue)
Vue component to trap the focus within a DOM element.
Vue组件可将焦点捕获在DOM元素内。
安装 (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 theactive
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 ElementinitialFocus
:string | (() => Element)
string | (() => Element)
选择器或函数返回一个ElementfallbackFocus
:string | (() => Element)
Selector or function returning an
ElementfallbackFocus
: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 activatesactivate
:每当陷阱激活时deactive
: Whenever the trap deactivates (note it can also be deactivated bydeactive
:无论何时停用陷阱(请注意,也可以通过以下方式停用陷阱:
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://vuejsexamples.com/vue-component-to-trap-the-focus-within-a-dom-element/
vue组件转换成dom元素