vue.js - 在 Vue 中禁用键绑定(bind)复制/粘贴

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 函数来帮助我处理这些键绑定(bind)。
该代码只是一个示例，也许它有一些错误，但它给出了表单结构以及我如何称呼它的想法。

Answer 1

为了避免右键单击，您可以使用 @click.right.prevent 之类的内容。这将阻止单击元素及其子元素。
您可以通过绑定(bind) copy 来禁用 Ctrl+C 和 Ctrl+V和 paste以同样的方式发生事件。
您可以在此处看到一个工作示例，其中无法复制段落(好吧，除非您从源代码复制它):

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