useTextSelection
基于 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>