vue实现粘贴功能

2021-01-18 13:50:21

vue监听粘贴事件

  • paste事件就是粘贴事件

  • 需要通过clipboardData获得粘贴的内容

<table>
    <tr>
        <td @paste="pasteMe($event)"></td>
    </tr>
</table>

pasteMe() {
    //获得粘贴的文字
    let self = this;
    var data = null;
    var clipboardData = e.clipboardData; // IE
    if (!clipboardData) {
        //chrome
        clipboardData = e.originalEvent.clipboardData;
    }
    data = clipboardData.getData("Text");
}
//如果是要获得粘贴excel的内容,需要把粘贴的内容转换成二维数组
pasteExcel() {
    let self = this;
      var data = null;
      var clipboardData = e.clipboardData; // IE
      if (!clipboardData) {
        //chrome
        clipboardData = e.originalEvent.clipboardData;
      }
      data = clipboardData.getData("Text");
      var rowStrArray = data.split("\n");
      var rows = [];
      for (var i = 0; i < rowStrArray.length; i++) {
        var row = [];
        var tdStrArray = rowStrArray[i].split("\t");
        for (var j = 0; j < tdStrArray.length; j++) {
          row.push(tdStrArray[j]);
        }
        rows.push(row);
      }
      //rows就是获得复制excel的二维数组
}

如果使用了element等UI框架,需要在el-input中使用粘贴事件,@paste.native

<el-input
          size="mini"
          v-model="value"
          placeholder="0.00"
          @paste.native="pasteMe"
></el-input>


  • 2018-08-26 00:18:04

    RecyclerView 图片错位空白的问题

    1.图片错位的原因是因为图片异步记载返回去展示出的问题。图片空白,是item刷新,请求图片时间上的问题。 2。viewHolder.setIsRecyclable(false); 就没有tag,不设置 就有tag,但是有没有没啥区别 设置tag,

  • 2018-08-28 10:00:24

    laravel使用队列的简单步骤

    最近需要导入大量的excel文件,数量达到十万之多。 而我又不想修改服务器的超时时间,因为这样可能影响服务器的堵塞。 而php又没有很好的异步。 后来发现了令laravel最为骄傲的部分,队列。具体文档参考下方链接。

  • 2018-08-28 14:19:58

    php如何配置上传较大文件

     在php中判断上传文件的大小,但是文件一但过大,print_r($_FILES);的值就变为null了,有时候大家会遇到这么一个问题,上传小文件 时,PHP能正常获取到,但是文件一超过8M就变为空了,我在做项目的时候,就遇到这样的问题,我刚开始把最大上传文件值改为20M,在PHP.INI里 面。

  • 2018-08-28 15:09:50

    JAVA中MAP值保持顺序不变

    今天在进行JAVA开发过程中,因需要使用MAP来存放数据,同时希望MAP中KEY的顺序与放入顺序保持一致。 在使用HashMap之后,发现KEY的顺序是乱序的,每次打印还不太一样。上网查询资料之后发现: