Question

我在SSR中将Vue.js与 Nuxt 一起使用，我想突出显示一些文本以获取此文本并对其执行操作。

我找到了一种方法来处理<input>中的某些文本，但是我希望在这里能够@选择段落中的某些文本，而不是输入中的文本。

这是我使用<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));
  },

我试图用'innerHTML'替换'listener'代码中的'value'，但似乎不起作用

谢谢！

编辑：我使用了Terry提出的方法，并且在段落中效果很好。但是，当我想突出显示从Vue组件的V循环中的数据库返回的对象上的某些文本时，出现以下错误：'Uncaught TypeError：无法在'Node'上执行'contains'：参数1不是类型为“节点”。在HTMLDocument。”

这是我在vue组件上返回的对象，该对象实际上是我用v-html转换为纯文本的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());
 },

Answer 1

select事件仅受类似输入的元素支持。如果要在常规元素中获取选定的文本，只需监听mouseup事件。 mouseup事件应调用一个函数，您只需在其中调用window.getSelection().toString()即可检索选定的文本。

在下面的示例中，我们将mouseup侦听器绑定到document，并在事件处理程序中执行其他过滤，以便仅关注元素（在这种情况下为this.$refs.target ）将触发获取选择的回调：

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>

更新：根据您的回答，您将想要更新与之比较的event.target（例如，如果您不希望任何选择触发testFunction() ），或完全排除if个条件：

document.addEventListener('mouseup', event => {
    this.testFunction1();
});

Answer 2

我不清楚您是要对输入内部还是文档其他位置的选择做出反应。假设输入内容为：

收听mouseup事件。
使用$event传递事件本身。
getSelection()不适用于输入值，因此请使用selectionStart和selectionEnd进行选择。

new Vue({
  el: '#app',
  methods: {
    logSelectionWithinInput(e) {
      var selection = e.target.value.substring(
        e.target.selectionStart,
        e.target.selectionEnd
      );
      console.log(selection);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @mouseup="logSelectionWithinInput($event)" value="Text to select" />
</div>

如何使用事件@select从Vue.js的段落中选择一些文本？

2 个答案: