跳到主要内容

useTextSelection

分类
导出大小
786 B
上次更改
4 天前

基于 Window.getSelection 响应式追踪用户文本选择。

演示

你可以在页面上选择任何文本。

选中的文本:未选择

选中的矩形

[]

用法

vue
<script setup lang="ts">
import { 
useTextSelection
} from '@vueuse/core'
const
state
=
useTextSelection
()
</script> <template> <
p
>{{
state
.
text
}}</
p
>
</template>

类型声明

ts
/**
 * Reactively track user text selection based on [`Window.getSelection`](https://mdn.org.cn/en-US/docs/Web/API/Window/getSelection).
 *
 * @see https://vueuse.org.cn/useTextSelection
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function 
useTextSelection
(
options
?:
ConfigurableWindow
): {
text
:
ComputedRef
<string>
rects
:
ComputedRef
<DOMRect[]>
ranges
:
ComputedRef
<Range[]>
selection
:
ShallowRef
<Selection | null, Selection | null>
} export type
UseTextSelectionReturn
=
ReturnType
<typeof
useTextSelection
>

来源

源代码演示文档

贡献者

Anthony Fu
Anthony Fu
Kevin Luo
James Garbutt
SerKo
Fernando Fernández
Lehoczky Zoltán
wheat
Jelf
webfansplz

更新日志

v14.0.0
dbb3e - feat: 设置 use text selection 的初始值 (#5092)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。