useTextSelection

类别

Sensors

导出体积

755 B

上次更改

6 minutes ago

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

示例

源码playground (beta)

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

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

所选矩形区域：

[]

用法

<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

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志