VUE 粘贴剪切板内容到页面

复制到剪切板看这里

使用方法

利用 paste 事件，读取剪切板中的内容，进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<input
  type="text"
  v-model="message"
  @paste.native.capture.prevent="pasteMaeesge($event)"
/>
<!-- prevent 阻止默认事件，使用pastMessage对输入框进行赋值 -->

<script>
  new Vue({
    //...
    data() {
      return {
        meaasge: null,
      };
    },
    methods: {
      pasteMaeesge($event) {
        let clipdata = $event.clipboardData || window.clipboardData;
        let message = clipdata.getData("text/plain");
        if (message.length == 0) {
          return;
        }
        //可以对message做一些额外的操作
        this.meaasge = message;
      },
    },
    //...
  });
</script>

例子

粘贴 IP 地址到四个输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<input
  type="text"
  v-model="ipInfo.ip1"
  @paste.native.capture.prevent="pasteIP($event)"
/>
<input
  type="text"
  v-model="ipInfo.ip2"
  @paste.native.capture.prevent="pasteIP($event)"
/>
<input
  type="text"
  v-model="ipInfo.ip3"
  @paste.native.capture.prevent="pasteIP($event)"
/>
<input
  type="text"
  v-model="ipInfo.ip4"
  @paste.native.capture.prevent="pasteIP($event)"
/>

<script>
  new Vue({
    //...
    data() {
      return {
        ipInfo: {
          ip1: null,
          ip2: null,
          ip3: null,
          ip4: null,
        },
      };
    },
    methods: {
      pasteIP($event) {
        let clipdata = $event.clipboardData || window.clipboardData;
        let ipStr = clipdata.getData("text/plain");
        if (ipStr.length == 0) {
          return;
        }
        let ipArray = ipStr.split(".");
        if (ipArray.length !== 4) {
          alert("IP 格式错误");
          return;
        } else {
          //进一步判断ip格式
          this.ipInfo.ip1 = ipArray[0];
          this.ipInfo.ip2 = ipArray[1];
          this.ipInfo.ip3 = ipArray[2];
          this.ipInfo.ip4 = ipArray[3];
        }
      },
    },
  });
</script>