element-ui element-plus trap-focus

源代码地址 - trap-focus

version:element-plus 1.0.1-beta.0

这个指令只在dialog中使用了

import { nextTick } from 'vue'
import { on, off } from '@element-plus/utils/dom'
import { obtainAllFocusableElements, EVENT_CODE } from '@element-plus/utils/aria'import type { ObjectDirective } from 'vue'export const FOCUSABLE_CHILDREN = '_trap-focus-children'
export const TRAP_FOCUS_HANDLER = '_trap-focus-handler'export interface ITrapFocusElement extends HTMLElement {[FOCUSABLE_CHILDREN]: HTMLElement[][TRAP_FOCUS_HANDLER]: (e: KeyboardEvent) => void
}// 中文文档示例 https://www.vue3js.cn/docs/zh/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0
// api https://www.vue3js.cn/docs/zh/api/application-api.html#directive
// 现在可以直接调用生命周期函数
const TrapFocus: ObjectDirective = {beforeMount(el: ITrapFocusElement) {// obtainAllFocusableElements 是一个过滤el下FOCUSABLE_ELEMENT_SELECTORS所有可以focus和可见的函数// const FOCUSABLE_ELEMENT_SELECTORS =`a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)el[TRAP_FOCUS_HANDLER] = (e: KeyboardEvent) => {const focusableElement = el[FOCUSABLE_CHILDREN]// 如果el[FOCUSABLE_CHILDREN]中含有子元素 并且键盘按下的是`Tab`if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) {// 如果只有一个元素if (focusableElement.length === 1) {// 阻止默认行为就是tab无效e.preventDefault()// 如果当前获得焦点的元素不是这唯一一个元素 那么让他获得焦点if (document.activeElement  !== focusableElement[0]) {focusableElement[0].focus()}return}const goingBackward = e.shiftKeyconst isFirst = e.target === focusableElement[0]const isLast = e.target === focusableElement[focusableElement.length - 1]// shift + tab 同事按下 并且是第一个元素的话// 个人理解就是 tab 反方向if (isFirst && goingBackward) {e.preventDefault()// 最后一个focusfocusableElement[focusableElement.length - 1].focus()}// 没有shift 如果到了最后一个 则第一个focusif (isLast && !goingBackward) {e.preventDefault()focusableElement[0].focus()}// the is critical since jsdom did not implement user actions, you can only mock it// DELETE ME: when testing env switches to puppeteerif (process.env.NODE_ENV === 'test') {const index = focusableElement.findIndex(element => element === e.target)if (index !== -1) {focusableElement[goingBackward ? index - 1 : index + 1]?.focus()}}}}on(document, 'keydown', el[TRAP_FOCUS_HANDLER])},updated(el: ITrapFocusElement) {nextTick(() => {// 重新获取el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)})},unmounted(el: ITrapFocusElement) {off(document, 'keydown', el[TRAP_FOCUS_HANDLER])},
}export default TrapFocus

element-ui element-plus trap-focus - 分析相关推荐

Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
Element UI Element Plus之改变表格单元格颜色
首先官网文档中有 Table 表格组件的属性说明,只需要在el-table标签中加上:cell-style="xxx",以及实现该方法即可.Element UI框架和Elemen ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
网站快速成型工具-Element UI
Element UI Element UI 1 什么是Element UI???? 2 搭建环境 2.1 创建vue项目 2.2 安装 element-ui组件 2.3 Element UI 引入 3 ...
element UI的带输入建议el-autocomplete总结（详细，全）
Table of Contents 引用el-autocomplete 触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug vue+elemen ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
Vue + Element UI｜可随商品单价和数量实时更新总价的表格
引入Element UI可参考文章如何在Vue项目引入Element UI Element UI官网效果编辑表格中的单价和采购数量,总金额.商品总价.合计金额可以同步变化.点击测试按钮在控制台打 ...
【Element UI】日期选择器el-date-picker 默认选中当前日期==＞不可选当日之前的日期
一个人能否合理表达自己的攻击性是健康与否的重要标准. 参考Element UI Element - The world's most popular Vue UI framework 目录 1.默认 ...
Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...

element-ui element-plus trap-focus - 分析

element-ui element-plus trap-focus - 分析相关推荐

最新文章

热门文章