useTextSelection

分类

传感器

导出大小

786 B

上次更改

4 天前

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

演示

源代码演练场 (beta)

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

选中的文本:未选择

选中的矩形

[]

用法

vue

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

const state
 = useTextSelection
()
</script>

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

类型声明

/**
 * 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
>