Vue 是一個基于 MVVM 模式的前端框架,可以幫助我們更高效地開發 Web 應用。在 Vue 中,獲取用戶選擇的文本內容非常方便。下面我們通過幾個示例來了解 Vue 獲取 selection 的方法。
假設我們有一個 div 標簽,其中包含一段文本。我們可以通過綁定 @mouseup 事件,獲取用戶選擇的文本內容:
<template>
<div @mouseup="getSelection">
一段文本內容
</div>
</template>
<script>
export default {
methods: {
getSelection() {
const selection = window.getSelection().toString()
console.log(selection)
}
}
}
</script>
在上面的代碼中,我們使用 window.getSelection() 方法來獲取用戶選擇的文本內容,然后將其轉換為字符串并打印到控制臺中。當用戶松開鼠標時,@mouseup 事件就會觸發 getSelection 方法。
如果我們需要獲取選中文本的父元素信息,可以使用 getRangeAt() 方法。例如:
<template>
<div @mouseup="getSelection">
一段文本內容
</div>
</template>
<script>
export default {
methods: {
getSelection() {
const selection = window.getSelection()
if(selection.rangeCount > 0) {
const range = selection.getRangeAt(0)
const parentElement = range.commonAncestorContainer.parentNode
console.log(parentElement.tagName)
}
}
}
}
</script>
在上面的代碼中,我們通過 getRangeAt() 方法獲取用戶選中文本的父元素信息,并打印出其標簽名。這里的 range.commonAncestorContainer.parentNode 就是獲取到的父元素信息。
除了上述兩種方法,我們還可以使用 document.getSelection() 方法來獲取選擇的文本。通過這些方法,我們可以輕松地在 Vue 中獲取用戶選擇的文本內容和父元素信息,從而實現更加精細的交互處理。