我在 SSR 中使用带有 Nuxt 的 Vue.js，当我突出显示某些文本时，我希望获取此文本并对其执行操作.
我找到了一种方法来使用 <input> 中的一些文本来做到这一点，但我希望在这里能够从段落而不是从输入中@select 一些文本.
这是我使用 的方法:
<div><input @select="testFunction2()" value="TEXTE TO SELECT"></模板>安装(){window.addEventListener('select',this.testFunction2,innerHTML)},方法:{testFunction2(事件){console.log(event.target.value.substring(event.target.selectionStart, event.target.selectionEnd));},
我尝试将侦听器"代码中的值"替换为innerHTML"，但似乎不起作用，
谢谢！
我使用了 Terry 提出的方法，它在段落上运行良好.但是，当我想在 Vue 组件的 v-loop 中突出显示从数据库返回的对象上的某些文本时，我收到此错误:'Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not节点"类型.在 HTMLDocument 中.'
这是我在 vue 组件上返回的对象，该对象实际上是一个 html 文本，我使用 v-html 将其转换为纯文本:
<b行><b-col col lg="10" id="myNoteList" class="htmlNonUser 灰色文本文本-darken-2 myNoteList" style=""><p v-html="itemJournal.content"ref="目标"></p></b-col></b-row>安装:功能(){document.addEventListener('mouseup', event => {if (event.target === this.$refs.target ||event.target.contains(this.$refs.target))this.testFunction1();});},testFunction1(事件){console.log(window.getSelection().toString());}, select 事件仅由类似输入的元素支持.如果您想在常规元素中获取所选文本，只需监听 mouseup 事件.mouseup 事件应该调用一个函数，您只需调用 window.getSelection().toString() 来检索所选文本.
在下面的示例中，我们将 mouseup 侦听器绑定到 document，并在事件处理程序中执行额外的过滤，以便只有感兴趣的元素(在这种情况下), this.$refs.target) 将触发获取选择的回调:
new Vue({el: '#app',安装(){document.addEventListener('mouseup', event => {if (event.target === this.$refs.target || event.target.contains(this.$refs.target))this.testFunction();});},方法: {测试函数(){console.log(window.getSelection().toString());}}});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><input @select="testFunction" value="要选择的文本"/><p ref="target">Lorem ipsum dolor sat amet</p>更新:根据您的回答，您要么想要更新 event.target 的比较对象(例如，如果您不想触发任何选择testFunction())，或者完全保留 if 条件:
document.addEventListener('mouseup', event => {this.testFunction1();});I'm using Vue.js with Nuxt in SSR, I would like when I highlight some text to get this text and perform an action on it.
I found a way to do that with some text in <input> but I would like here to be able to @select some text from a paragraph and not from an input.
here is how I did using <input>:
<template>
<div>
<input @select="testFunction2()" value="TEXTE TO SELECT">
</div>
</template>
mounted() {
window.addEventListener('select',this.testFunction2,innerHTML)
},
methods:{
testFunction2(event) {
console.log(event.target.value.substring(event.target.selectionStart, event.target.selectionEnd));
},
I tried to replace in the 'listener' code, the 'value' by 'innerHTML', but it doesn't seem to work,
Thank you!
EDIT :I used the method proposed by Terry and it's working well on a paragraphe.But when I want to highlight some text on an object that I return from a database in a v-loop on the Vue component I get this error : 'Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'. at HTMLDocument.'
This is the object I return on my vue component, the object is actually a html text that i convert to a plain text with v-html :
<li v-for=" itemJournal in journalContent">
<b-row>
<b-col col lg="10" id="myNoteList" class="htmlNonUser grey-text text-
darken-2 myNoteList" style=""><p v-html="itemJournal.content"
ref="target"> </p>
</b-col>
</b-row>
mounted:function(){
document.addEventListener('mouseup', event => {
if (event.target === this.$refs.target ||
event.target.contains(this.$refs.target))
this.testFunction1();
});
},
testFunction1(event){
console.log(window.getSelection().toString());
},
The select event is only supported by input-like elements. If you want to get the selected text within regular elements, simply listen to the mouseup event. The mouseup event should call a function where you simply call window.getSelection().toString() to retrieve the selected text.
In the example below, we bind the mouseup listener to the document, and perform additional filtering within the event handler so that only an element of interest (in this case, this.$refs.target) will trigger the callback that gets the selection:
new Vue({
el: '#app',
mounted() {
document.addEventListener('mouseup', event => {
if (event.target === this.$refs.target || event.target.contains(this.$refs.target))
this.testFunction();
});
},
methods: {
testFunction() {
console.log(window.getSelection().toString());
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input @select="testFunction" value="Text to select" />
<p ref="target">Lorem ipsum dolor sit amet</p>
</div>Update: Based on your answer, you will either want to update what the event.target is compared against (e.g. if you don't want any selection to trigger testFunction()), or leave the if conditional out completely:
document.addEventListener('mouseup', event => {
this.testFunction1();
});
这篇关于如何使用事件 @select 从 Vue.js 的段落中选择一些文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！