@zhencai/vue-focus-scope 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +10 -10
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -23,23 +23,25 @@
|
|
|
23
23
|
|
|
24
24
|
## 安装与使用
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
```vue
|
|
27
|
+
npm install @zhencai/vue-focus-scope
|
|
28
|
+
```
|
|
27
29
|
|
|
28
30
|
### 基础用法
|
|
29
31
|
|
|
30
32
|
```vue
|
|
31
33
|
<template>
|
|
32
|
-
<
|
|
34
|
+
<FocusScope>
|
|
33
35
|
<h3>用户登录</h3>
|
|
34
36
|
<input type="text" placeholder="用户名" />
|
|
35
37
|
<input type="password" placeholder="密码" />
|
|
36
38
|
<button @click="submit">登录</button>
|
|
37
39
|
<a href="/forgot">忘记密码？</a>
|
|
38
|
-
</
|
|
40
|
+
</FocusScope>
|
|
39
41
|
</template>
|
|
40
42
|
|
|
41
43
|
<script setup lang="ts">
|
|
42
|
-
import
|
|
44
|
+
import FocusScope from "@zhencai/vue-focus-scope";
|
|
43
45
|
</script>
|
|
44
46
|
```
|
|
45
47
|
|
|
@@ -50,14 +52,14 @@ import FocusLoop from "./components/FocusLoop.vue";
|
|
|
50
52
|
```vue
|
|
51
53
|
<template>
|
|
52
54
|
<!-- 强循环：焦点永远无法逃出此区域 -->
|
|
53
|
-
<
|
|
55
|
+
<FocusScope tab-mode="loop">
|
|
54
56
|
<!-- 内容 -->
|
|
55
|
-
</
|
|
57
|
+
</FocusScope>
|
|
56
58
|
|
|
57
59
|
<!-- 软循环：适合只有一个输入框或需要特殊逃逸逻辑的场景 -->
|
|
58
|
-
<
|
|
60
|
+
<FocusScope tab-mode="soft-loop">
|
|
59
61
|
<input type="text" placeholder="唯一输入框" />
|
|
60
|
-
</
|
|
62
|
+
</FocusScope>
|
|
61
63
|
</template>
|
|
62
64
|
```
|
|
63
65
|
|
|
@@ -100,8 +102,6 @@ import FocusLoop from "./components/FocusLoop.vue";
|
|
|
100
102
|
|
|
101
103
|
- **子元素要求**：确保插槽内的元素是原生的可聚焦元素（如 `<input>`, `<button>`, `<a href>`）或具有有效的 `tabindex`
|
|
102
104
|
|
|
103
|
-
- **CSS 样式**：哨兵节点默认带有 `tabindex="0"` 但无视觉样式。如果需要，可以通过 CSS 类 `.sentinel-start` 或 `.sentinel-end` 进行调试（例如添加红色边框），但在生产环境中通常保持隐藏
|
|
104
|
-
|
|
105
105
|
## 许可证
|
|
106
106
|
|
|
107
107
|
MIT
|