useTextSelection

类别

Sensors

导出体积

755 B

上次更改

2 months ago

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

示例

源码 playground (beta)

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

所选文本：未选择任何内容

所选矩形区域：

[]

用法

vue

<script setup lang="ts">
import { useTextSelection
 } from '@vueuse/core'

const state
 = useTextSelection
()
</script>

<template>
  <p
>{{ state
.text
 }}</p
>
</template>

类型声明

export interface UseTextSelectionOptions extends ConfigurableWindow {}
export interface UseTextSelectionReturn {
  text
: ComputedRef
<string>
  rects
: ComputedRef
<DOMRect[]>
  ranges
: ComputedRef
<Range[]>
  selection
: ShallowRef
<Selection | null>
}
/**
 * 基于 [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) 响应式跟踪用户文本选择。
 *
 * @see https://vueuse.org/useTextSelection
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useTextSelection
(
  options
?: UseTextSelectionOptions,
): UseTextSelectionReturn