如何在vue.js中处理粘贴(Ctrl + v或鼠标)事件？

Question

我需要在将某些东西粘贴到我的vue.js应用程序中的文本区域时调用函数.在这种情况下,我应该在哪个事件中调用我的函数？

Answer 1

您可以简单地使用该paste事件:

<textarea @paste="onPaste"></textarea>

...
  methods: {
    onPaste (evt) {
      console.log('on paste', evt)
    }
  }
...

这不是特定于vue的事件.请参阅https://developer.mozilla.org/en-US/docs/Web/Events/paste

Answer 2

此外，您可以使用.prevent功能为输入禁用 Past 事件 (CTRL+V) 。

<input v-model="input" @paste.prevent class="input" type="text">

此输入将自动禁用过去的操作

Answer 3

使用onPasteVue 2.6中的方法，evt.target.value是空的。要获取文本值，请使用：

  methods: {
    onPaste (evt) {
      console.log('on paste', evt.clipboardData.getData('text'))
    }
  }