在 Vue 中禁用键绑定复制/粘贴

Question

我第一次在 Vue 工作。我有一个带有 ID 确认的表单，我需要限制CTRL+ C、CTRL+v和右键单击复制/粘贴输入。

表格的代码是这样的：

<script>
import { validationMixin } from 'vuelidate'

  data () {
    return {
      form: {
        id_number: '',
        id_number_validation: '',
      },
    }
  },
  computed: {
    chunkedForm () {
      return chunk([
        { label: 'ID number',
          model: 'id_number',
          type: 'number',
          event: null,
          icon: 'assignment_ind' },
        { label: 'id number validation',
          model: 'id_number_validation',
          type: 'number',
          event: null,
          icon: 'assignment_ind' },
      ], 2)
    },
    today: function () {
      let currenDate = new Date()
      return currentDate.toISOString()
    }
  },
  validations: {
    form: {
      id_number: {
        numberSerializer,
        required,
        minLength: minLength(6),
        maxLength: maxLength(11),
        validDocumentNumber
      },
      id_number_validation: {
        numberSerializer,
        required,
        minLength: minLength(6),
        maxLength: maxLength(11),
        validDocumentNumber,
        sameAsDocumentNumber: sameAs('id_number')
      },
    },
  },

</script>

我不知道是否可能，我正在寻找一个 Vue 函数来帮助我处理这些键绑定。

代码只是一个示例，也许它有一些错误，但它提供了表单结构的概念以及我如何调用它。

Answer 1

为了避免右键单击，您可以使用类似的东西@click.right.prevent来阻止单击元素及其子元素。您可以通过以相同方式绑定copy和paste事件来禁用 Ctrl+C 和 Ctrl+V 。

您可以在此处看到一个工作示例，其中该段落无法复制（好吧，除非您从源代码中复制它）：

new Vue({
  el: '#content',
  data: {

  },
  methods: {
    keydown: function(e) {
      console.log(e)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="content">
  <p @click.right.prevent @keydown="keydown" @copy.prevent @paste.prevent>
    You shouldn't be able to copy me! <strong>Me Too!</strong>
  </p>
</div>

https://codepen.io/lielfr/pen/RwaQJwm

但是，熟练的用户可能能够轻松绕过这些保护，因此在显示您不希望用户复制的内容之前，我会三思而后行。